OpenBit

When we produced the Google Tasks extension we soon found out users wanted two things:

1. The ability to resize the window
2. Google Apps integration

We chose to use local storage to persist these settings because it was more straight forward and reliable than other methods, plus we wanted to take advantage of Chrome’s modern HTML 5 features.

Local storage lets you store data in key value pairs on your user’s machine. The data you store is unique to your domain, so creating a unique name for your key isn’t a huge worry.

So, to store a value called “height” with the value “400″ in local storage you execute the following command:

localStorage.setItem("height", "400");

This sets the value of height, unique to your domain, to 400. Notice that I haven’t used a string for a numeric value. This is because local storage can only record data with a string key and value.

To retieve that value you’d execute:

var height = localStorage.getItem("height");

getItem returns null if the item isn’t set so it’s pretty straight forward if you need to check if a user has set a value before:

if(!localStorage.getItem("height"))

    alert('no height set yet');

else

    alert('height is ' + localStorage.getItem("height"));

Lastly if you want to clear a setting call localStorage.remove('key'); where ‘key’ is the key of the value you want to remove. If you want to clear all settings call localStorage.clear().

Local storage is perfect for storing things like settings. If, however, you want to store data on a per session basis (perhaps a shopping basket) you can use the sessionStorage API. This works just like local storage.

Furthermore if you’re feeling adventurous try looking at databaseStorage, a SQL enabled local data persistence API baked in to HTML5.