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.

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.

• javascript
• file
• object
• save

• Not possible with just javascript. The best you could do is use localStorage but that's not permanent storage – Sterling Archer Commented Dec 10, 2013 at 8:29
• You need to serialize the object and send the result string to a script language (like Java, PHP, etc.) that is able to create a file out of this. – Benedikt Commented Dec 10, 2013 at 8:31
• Why you want to fire the water ...? Impossible to re-save – Prasath K Commented Dec 10, 2013 at 8:31
• Perhaps you want the new FileSystem APIs? Although I wouldn't put that in the bracket of feasible – CodingIntrigue Commented Dec 10, 2013 at 8:33

3 Answers 3

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.

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...

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();
}