Beyond HTML5 and CSS3

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?

Shane Riley has a wonderful example of how jQuery and localStorage can help improve your forms.

Saving Form State with jQuery and localStorage

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!

http://documentcloud.github.com/backbone/docs/todos.html

What a great way to demonstrate the usefulness of localStorage!

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.