CODEWITHSUNDEEP
javascriptfileobjectsave
Shannon Rothe
Shannon Rothe

Reputation: 1122

Saving a Javascript object to a file

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.

Upvotes: 10

Views: 30644

Answers (3)

Yair Levy
Yair Levy

Reputation: 1594

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

Upvotes: 3

Lenny
Lenny

Reputation: 5939

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

Upvotes: 3

CodingIntrigue
CodingIntrigue

Reputation: 78525

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.

Upvotes: 4

Related Questions