How to save data in local hd with javascript?

Question

I'm using CKEditor to create text in a website that create documents. The problem is the internet connection, the PC is far away from town and it's unstable 3G connection. I already have a routine to save a draft every ten seconds (or the time the user wish to be) in the server for safe - simple task. The problem is that if the internet goes down, the user will have to select - copy the text and try to save it locally with some text editor (maybe Word, that will make a mess).

So I'm wondering if already exists a way of to create a file and download to the local HD without remote server, just the JavaScript and navigator. Also, it might be another way to save the job but keeping CPU on and navigator open, but couldn't find in stack overflow.

I found just one non-standard API FireFox compatible: Device Storage API Of course, is not JavaScript standard so I don't know if it's a good idea to use right now.

Any ideas?

Answer 1

[Compatibility Note]

This solution uses <a> attribute download, to save the data in a text file.
This html5 attribute is only supported by Chrome 14+, Firefox 20+ and Opera 15+ on desktop, none on iOS and all current majors except WebView on Android.

-A workaround for IE 10+ is to not hide/destroy the link generated by clickSave()and ask user to right-click > Save target As…

-No known workaround for Safari.

Also note that data will still be accessible via localStorage.getItem() for Firefox 3.5+, Chrome&Safari 4+, Opera 10.5+ and IE 9+ (xhr will crash IE 8-)

---

I would do it like so, assuming your actual code saves the data via xhr.

function saveData() {
    var xhr = new XMLHttpRequest();
    //set a timeout, in ms, to see if we're still connected
    xhr.timeout = 2000;
    xhr.addEventListener('timeout', localStore, false);
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) {
        // not a good news
        if (xhr.status !== 200) {
          localStore();
        }
        else{
          document.querySelector('#local_alert').style.display = 'none';
        }
      }
    }
    //I assume you already have the part where you set the credentials
    xhr.open('POST', 'your/url.php');
    xhr.send();
  }

  //Show the link + Store the text in localStorage
  function localStore() {
    document.querySelector('#local_alert').style.display = 'block';
    var userText = document.querySelector('textArea').value;
    localStorage.setItem("myAwesomeTextEditor", userText);
  }

  //provide a link to download a file with 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 a = 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 actually offline, please beware your draft is not saved on our server
  <button onclick="clickSave()">Save Now</button>
</div>

<textarea></textarea>

Ps: If your user leaves the page without connection, you'll be able to get the text back via localStorage.getItem("myAwesomeTextEditor")

PPs: A more "live" example can be found here (it won't save to server but you've got the rest of the logic working). Try to disconnect , then reconnect.