Storing Objects in HTML5 localStorage

Looking at the Apple, Mozilla and Mozilla again documentation, the functionality seems to be limited to handle only string key/value pairs.

A workaround can be to stringify your object before storing it, and later parse it when you retrieve it:

var testObject = { 'one': 1, 'two': 2, 'three': 3 };// Put the object into storagelocalStorage.setItem('testObject', JSON.stringify(testObject));// Retrieve the object from storagevar retrievedObject = localStorage.getItem('testObject');console.log('retrievedObject: ', JSON.parse(retrievedObject));

A minor improvement on a variant:

Storage.prototype.setObject = function(key, value) {    this.setItem(key, JSON.stringify(value));}Storage.prototype.getObject = function(key) {    var value = this.getItem(key);    return value && JSON.parse(value);}

Because of short-circuit evaluation, getObject() will immediately return null if key is not in Storage. It also will not throw a SyntaxError exception if value is "" (the empty string; JSON.parse() cannot handle that).

You might find it useful to extend the Storage object with these handy methods:

Storage.prototype.setObject = function(key, value) {    this.setItem(key, JSON.stringify(value));}Storage.prototype.getObject = function(key) {    return JSON.parse(this.getItem(key));}

This way you get the functionality that you really wanted even though underneath the API only supports strings.