Storing Arrays in LocalStorage

December 6, 2013 at 4:48 pm in HTML5, Javascript, Web Storage

LocalStorage is amazing. We can persist data right on the client’s computer in the browser. We’ll have 5 to 10 MB of storage available.  However, it’s often not quite good enough for our needs; the values we store must be strings.

But with the help of JSON.stringify() and JSON.parse(), we can use LocalStorage for much more.

var names = [];
// collect some stuff into  the names array.
for(var count=0; count < 5; count++){
  names.push(prompt("New member name?"));

// convert the array of names into a JSON string. 
localStorage["names"] = JSON.stringify(names);

Later, we’ll want to retrieve those from the localStorage database. So we turn the string back into an array like this:

var namesFromLocalStorage = JSON.parse(localStorage["names"]);

You could use LocalStorage as a cache for all sorts of things. Simple arrays, complex objects, and even content. Prefetch records from the backend in the background, push it into LocalStorage as a simple cache. When the user hits the “next page” button, display the results of LocalStorage’s content while fetching the next set of records.

How are you using LocalStorage in your projects?

No comments

Todo List with Backbone.js and LocalStorage

October 26, 2010 at 5:34 pm in HTML5, Javascript, Web Storage

HTML5’s Web Storage API lets us store data on the client’s machine without using cookies. You can use this to build complete client-side applications using HTML and JavaScript. One of the neatest examples of this so far is this simple To-Do list application which uses the Backbone.js framework. As a bonus, the source code for the application is annotated!

What a great way to demonstrate the usefulness of localStorage!

No comments

Store.JS – Cross-browser LocalStorage abstraction layer

June 28, 2010 at 9:01 pm in Javascript, Web Storage

Store.js just showed up on Github and looks promising. According to the site,

localStorage wrapper for all browsers without using cookies. Uses localStorage, globalStorage, and userData behavior under the hood

Take a look at the source code. It’s pretty small, very easy to read, and shows some nice uses of Javascript.

No comments