Saving a Javascript object to a file

Question

I need to save a Javascript object to a file, so it can be easily reloaded into a variable, modified and eventually re-saved. Is this feasible in Javascript and if so what's the best way to approach it. For example if I have:

o = {"test": 2};

How can I save it to a file, load, modify and save it? Exactly like pickle in Python.

Thanks.

Solution 1

If you literally mean a file this is not possible client-side. However, if it's just the data you want to store and recall you can use a cookie if it's small. http://www.sitepoint.com/how-to-deal-with-cookies-in-javascript/

If it's larger you have to use HTML5 LocalStorage. However, this will only work on newer browsers.

You could do this to make a visit counter:

//try to load the data
var o = localStorage.getItem("mydata");
//if the data is empty set the data
if(!o) o = {"test": 0};
//increment the test value inside of o by one each time
o.test++;
//save the data to local storage
localStorage.setItem("mydata", JSON.stringify(o));

http://diveintohtml5.info/storage.html

Again, this will ONLY work on modern browsers like Chrome.

The traditional method would be to send it via AJAX to a server side script written in PHP, Python, Ruby, Java, etc...

Solution 2

Despite all the answers to the contrary, this is indeed possible. However it is limited by browser support. You can use the new FileSystem APIs in the latest versions of Chrome, etc:

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.PERSISTENT, 1024, function(fs) {
    fs.root.getFile('mystorage.txt', {create: true, exclusive: true}, function(file) {
        file.createWriter(function(writer) {
            var blob = new Blob(["putdatahere"], {type: 'text/plain'});
            writer.write(blob);
        });
    });
}, function() {
    console.log("Could not access file system");
});

Since you only want the files for your own uses, this sandboxed approach will work. There are a few more hoops you need to jump through (requesting a quota, creating a Blob object) but those are covered by the linked article and will all depend on your requirements.

Solution 3

You can save a file using the "download" attribute on a element. This is how it is done programmaticaly:

function saveJSON() {
   let data = "Whatever it is you want to save";
   let bl = new Blob([data], {
      type: "text/html"
   });
   let a = document.createElement("a");
   a.href = URL.createObjectURL(bl);
   a.download = "data.json";
   a.hidden = true;
   document.body.appendChild(a);
   a.innerHTML =
      "someinnerhtml";
   a.click();
}