Simplified Interface to HTML5 local storage

Simplified Interface to HTML5 local storage

Simplified Interface to HTML5 local storage

Documentation & Sandbox: http://rmcvey.github.com/jsper
Cart example: http://rmcvey.github.com/jsper/cart_example.html

I decided it was time to dive into the HTML5 local storage API the other night, knowing that it has a lot of potential. There are a few problems inherent to using it, the biggest problem being lack of support in older browsers (and to a lesser degree that it is not implemented exactly the same across browsers). The other major problem I have with localStorage is that you can only store strings. I have found a few classes that help with localStorage, but I have problems with them too because:

  • they utilize browser plugins like Flash
  • are enormously cumbersome to use with too many configuration options,
  • and once again, only store strings.
  • no unit tests
  • buggy
  • did I mention they are cumbersome to use and only hold strings????

So, I have set out to resolve these grievances and have come quite close with jsper. JSPER is a wrapper class around local storage that provides a more friendly api to localStorage using simple get and set methods:

jsper.set('foo', {bar:'baz',boz:{bez:'biz'}});
//jsper.get returns the type of object you gave it; in this case, an object
var my_object = jsper.get('foo');

jsper.set('arr', ['a', 'b', 'c', 'd']);
// returns an array
var my_array = jsper.get('arr');

In addition to automatic serialization/deserialization, there are a number of other useful methods, most of which (non-getters) are chainable, overloaded and accept callbacks. Jstore allows you to inspect the current storage engine, force a different storage engine (including session-lifetime storage).

Iterating over a collection

// set an array in storage
jsper.set('an_array', ['This', 'is', 'pretty', 'cool']);
var message = "";
// perform iteration, data is the stored value and index is numerical index
jsper.each('an_array', function(data, index){
   message += " "+data;
});
console.log(message);//outputs: "This is pretty cool"

Lots more information @github: http://github.com/rmcvey/jsper
Also, I made it into a jquery plugin if you are into that sort of thing:


About the Author

Rob McVey

I am a software developer/IT professional helping businesses save money through informed purchase consulting; website development and marketing; and process automation.