离线版Webapp-存储JavaScript对象

Question

I'd like to make a simple web browser console program that would run COMPLETELY OFFLINE.

In that program, I'd like to store some data in the form of an array of objects so that I could easily pick a random object.

My problem is that even though I looked up the internet, including this question Storing Objects in HTML5 localStorage and this question Offline webapp. How to store data? , I still don't have any clue of what to do.

I'd like to find a way to easily add objects to my array and save those changes so that when I open the browser again, the data set would be intact.

I understand that HTML5's local storage only stores data in the form of strings, so what should I do ?

Should I use Node.js ? If so, how can I send back the data to my web browser Javascript file so that I can display things in the browser ?

Answer 1

You can serialize your array of objects using JSON.stringify so that it is stored as a string in Web Storage and deserialize it upon retrieval using JSON.parse :

var arrayOfObjects = [
    { foo: 'hello' },
    { bar: 'world' },
    { baz: 'dinosaurs' }
];

function storeInWebStorage(key, arr) {
    localStorage.setItem(key, JSON.stringify(arr));
}

function retrieveFromWebStorage(key) {
    return JSON.parse(localStorage.getItem(key));
}

storeInWebStorage(arrayOfObjects);

Keep in mind though that there's a limit on the amount of data you can store in Web Storage , and this limit differs between browsers.