I’ve been experimenting with a few HTML5 features lately including localStorage in a backbone app. While localStorage is not technically part of HTML5 usually people group it together with HTML5 so I’ll do the same here. If you’re not familiar with localStorage there’s a good introductory post here (also discusses sessionStorage).
One small limitation of using local storage is that it can only store strings. So if you want to store objects or arrays you will need to do some extra work.
For example storing the following object won’t work as expected:
This will actually convert the object to a string which results in the following test to be true:
So what do we have to do to get this working as expected?
JSON.parse and JSON.stringify to the rescue
To get around you’ll have to convert the object to a JSON string before adding it:
And to retrieve this you need to then parse the object:
This can get a little annoying if you are storing several different objects in your app so I would recommend creating a wrapper class to handle the object (de)serialization.
This allows us to store objects and retrieve them
1 2 3 4 5 6 7 8 9 10 11
But what about older browsers?
Of course not all browsers support localStorage. To see if it is supported in your browser (You are using a modern browser right?) check out html5test.com.
Instead of changing the wrapper class to check if local storage exists (since that’s not the responsibility of the wrapper) it would be better to use an HTML5 polyfill for this. I would recommend using a Modernizr polyfill to add this feature to older browsers.
Local storage is extremely useful for maintaining the state of dynamic web applications like single page applications or other backbone apps. It’s usually a good idea to keep things DRY by adding wrapper classes to any HTML5 feature that requires you to write extra code when using its API - like storing and retrieving objects via local storage.