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>
attributedownload
, 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 userright-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
Post a Comment