Using HTML5 localStorage To Store JSON
Our Persistent Storage Options
Of the three Web Storage has the widest support, particularly the localStorage aspect of specification. As localStorage is a key-value store, it's simplest of the three options. I classify simple as a strength.
The Truth about localStorage
Storing JSON, Functions And Arrays in localStorage
Luckily, we can store complex data in localStorage by leveraging the JSON object's stringify() and parse() functions. JSON support is quite good on mobile but if you need to add support use json2.js by Douglas Crockford.
Some things I find helpful when taking this approach:
- Use a unqiue key to scope your data inside localStorage
- Use load() and save() functions to abstract the use of localStorage.
- As your data set increases in size, load() and save() become more expensive. You'll want a more granular load/save mechanism on larger data sets.
Apologies to IndexedDB and Web SQL
IndexedDB would be a great option (supports indexes, hierarchies and key-values) but it has very limited support. Web SQL Database is a traditional SQL approach to data with decent mobile support but the specification is at an impasse and mayb not be supported in the future.
Thanks for reading.