Question

I am trying to use local storage to be able to save/load multiple sets of form inputs in a web app. I have found a couple references but I’m not sure how to apply them to my needs. Also, most examples I’ve found here concern storing a single set of settings which then are loaded the next time the page/app is loaded:

http://www.graphicpush.com/using-localstorage-api-as-a-light-database
http://www.paperkilledrock.com/2010/05/html5-localstorage-part-three/

The first link (graphicpush) is what I have tried to use to store multiple form input values but I’m not even sure if the values are being placed in the database. And once they are actually placed in the database, I’m not sure how to selectively recall a unique ID from the database and display it in the form.

The second link, I’ve looked at and is very close to what I need as well and I’m having the same problems as previously described.

My web app is located at http://www.sovascreen.com/estimator and you can view the attempt at localstorage in the “save.js” file. I know I’m very far off so please be kind.

I feel like this should be fairly simple but I don’t have a firm grasp on what I should be doing so any help would be appreciated.

Answer 1

Local storage is remarkably simple. A primer:

// set
localStorage.setItem('blah', 'blahblah')

// check if it is set
localStorage.getItem('blah')

// check how many items are stored
localStorage.length

// another way to get the item 
localStorage.key(0);

// remove the item
localStorage.removeItem('blah')

Here’s a Fiddle with a tiny library I wrote for you to interact with. It allows objects or strings to be added to localstore via JSON.parse and stringify.

Hit ‘run’ a few times and the output should look like:

blah is not set. setting to blahblah
["blah"]
blah is set to blahblah
[]
blah is not set. setting to blahblah
["blah"]
blah is set to blahblah
[]