How to save data in local hd with javascript? -


i'm using ckeditor create text in website create documents. problem internet connection, pc far away town , it's unstable 3g connection. have routine save draft every ten seconds (or time user wish be) in server safe - simple task. problem if internet goes down, user have select - copy text , try save locally text editor (maybe word, make mess).

so i'm wondering if exists way of create file , download local hd without remote server, javascript , navigator. also, might way save job keeping cpu on , navigator open, couldn't find in stack overflow.

i found 1 non-standard api firefox compatible: device storage api of course, not javascript standard don't know if it's idea use right now.

any ideas?

[compatibility note]

this solution uses <a> attribute download, save data in text file.
html5 attribute supported chrome 14+, firefox 20+ , opera 15+ on desktop, none on ios , current majors except webview on android.

-a workaround ie 10+ not hide/destroy link generated clicksave()and ask user right-click > save target as…

-no known workaround safari.

also note data still accessible via localstorage.getitem() firefox 3.5+, chrome&safari 4+, opera 10.5+ , ie 9+ (xhr crash ie 8-)


i so, assuming actual code saves data via xhr.

function savedata() {      var xhr = new xmlhttprequest();      //set timeout, in ms, see if we're still connected      xhr.timeout = 2000;      xhr.addeventlistener('timeout', localstore, false);      xhr.onreadystatechange = function() {        if (xhr.readystate == 4) {          // not news          if (xhr.status !== 200) {            localstore();          }          else{            document.queryselector('#local_alert').style.display = 'none';          }        }      }      //i assume have part set credentials      xhr.open('post', 'your/url.php');      xhr.send();    }      //show link + store text in localstorage    function localstore() {      document.queryselector('#local_alert').style.display = 'block';      var usertext = document.queryselector('textarea').value;      localstorage.setitem("myawesometexteditor", usertext);    }      //provide link download file txt content    window.url = window.url || window.webkiturl;    function clicksave(e) {      var usertext = document.queryselector('textarea').value;      var blob = new blob([usertext], {type: 'plain/text'});      var = document.createelement('a');      a.download = "myawesometexteditor" + (new date).gettime() + '.txt';      a.href = url.createobjecturl(blob);      a.style.display = "none";      document.body.appendchild(a);      a.click();      document.body.removechild(a);      }      setinterval(savedata, 3000);
#local_alert {    display: none;    position: static;    width: 100%;    height: 3em;    background-color: #aaa;    color: #fff;    padding: 0.5em;  }  body,  html {    margin: 0  }
<div id="local_alert">you're offline, please beware draft not saved on our server    <button onclick="clicksave()">save now</button>  </div>    <textarea></textarea>

ps: if user leaves page without connection, you'll able text via localstorage.getitem("myawesometexteditor")

pps: more "live" example can found here (it won't save server you've got rest of logic working). try disconnect , reconnect.


Comments

Popular posts from this blog

google chrome - Developer tools - How to inspect the elements which are added momentarily (by JQuery)? -

angularjs - Showing an empty as first option in select tag -

php - Cloud9 cloud IDE and CakePHP -