jQuery Local Storage done right (and easy)

jQuery Local Storage done right (and easy)

By Jared January 03, 2012

This year we worked on a cool project (launching mid-2012) to help users plan their finances and retirement. The site involved lots of calculators to capture user data and return estimates for their mortgage, Social Security benefit and other factors they would need to help them plan.

We found that HTML5 Local Storage gave us the best return in terms of reliability and speed. Internet Explorer compatibility? Not so much. So we wrote totalStorage, a jQuery plugin that combines the ease and usefulness of totalStorage with the universal compatibility of cookies (along with some helpful tools like automatic JSON encoding/decoding).

It’s designed to work with the awesome $.cookie plugin for jQuery so that less-than-desirable-browsers (like Microsoft’s Internet Explorer web site viewing tool) can play without any special code on your end. It’s also dead simple to use:

This sets a value of 6000 to the key ‘high-score’

$.totalStorage('high-score', 6000);

What to get the value of high-score? Easy-peasy:


What if it’s a complex array of objects? Fear not, totalStorage devours such data with the greatest of ease:

var scores = new Array();
scores.push({'name':'John', score:4300});
scores.push({'name':'Ari', score:6000});
scores.push({'name':'Jared', score:999999});
scores.push({'name':'Mike', score:100});
$.totalStorage('scores', scores);

TotalStorage is a safe, family-friendly way of introducing local storage to your web-apps without fear or scummy build-up. Try it today, it’s free!

Update 8/9/2012: totalStorage is now updated with some bug fixes and better support for those using cookies. Thanks to Erwin and Jonathan for help and suggestions! Same link, below:

Download from GitHub