HTML5 JavaScript localStorage Helper!!! Beyond a how to; "localStorageHelper" a clear and simple way to use Local Storage!

Just a quick and simple class for working with `localStorage`! Extremely easy to use!

Easy Uses!

Simply assign:

var lsh = new localStorageHelper()

And go!

• lsh.isAvailable; // after class called, becomes boolean property
• lsh.get(); // retrieve an Object of ALL available localStorage items
• lsh.get('keyName'); // retrieve value for storage item having passed key name
• lsh.set('keyName', 'assorted value'); // value can be ALMOST anything!
• lsh.remove('keyName'); // seeks to remove storage item having key name
• lsh.clear(); // remove ALL storage items
• lsh.on('eventName', callback); // set a callback method to preform when event is fired
• lsh.off('eventName', callback); // attempts to remove callback from list of handlers on given event

Oh, and did I mention events?!

• lsh.on('get', function(e) { /* e={ eventType: "get", key: "keyName", url: "currentAddress", value: "the value" } */ }); // do work whenever get is called AND something is actually retrieved
• lsh.on('set', function(e) { /* e={ eventType: "set", key: "keyName", success: bool, url: "currentAddress", value: "the value" } */ }); // do work when new value is set
• lsh.on('remove', function(e) { /* e={ eventType: "remove", key: "keyName", success: bool, url: "currentAddress", value: "the value" } */ }); // do work when value is removed
• lsh.on('clear', function(e) { /* e={ eventType: "clear", success: bool, url: "currentAddress" } */ }); // do work when all values are cleared

Code

function localStorageHelper() {
 // variable for this class
 var $this = this;
 
 // set whether if localstorage is isAvailable
 this.isAvailable = function() {
  try { return 'localStorage' in window && window['localStorage'] !== null; }
  catch (e) { return !1 }
 }();
 
 // HELPERS
 this.keyExists = function(key) { return this.isAvailable && key !== void 0 && localStorage.key(key); }
 this.keyAtIndex = function(i) { return this.isAvailable ? localStorage.key(i) : void 0; }
 // returns an array of keys
 this.getKeys = function() {
  if (!this.isAvailable) return void 0; 
  var k = []; 
  for (var i=0;i<localStorage.length;i++) k.push(localStorage.key(i)); 
  return k;
 }
 // returns array of values
 this.getValues = function() {
  if (!this.isAvailable) return void 0; 
  var v = []; 
  for (var i=0;i<localStorage.length;i++) v.push(this.get(localStorage.key(i))); 
  return v;
 }
 
 // get/set/remove/clear local storage item(s) and fire get event
 this.get = function(key) {
  if (this.isAvailable) {
   if (typeof key === "number") key = this.keyAtIndex(key);
   if (this.keyExists(key)) {
    var val;
    try { return val = JSON.parse(localStorage.getItem(key)); }
    catch(err) { return val = localStorage.getItem(key); }
    finally { this.onGet.fire(key, val); }
   }
   else if (key === void 0) { // if no key provided, then assume "get all" and return Object of all items in localStorage
    var a = {};
    try {
     for (var i=0;i<localStorage.length;i++) if (this.keyAtIndex(i)) a[this.keyAtIndex(i)] = this.get(this.keyAtIndex(i));
     return a;
    }
    finally { this.onGet.fire(key, a); }
   }
  }
  return void 0;
 }
 this.set = function(key, value) {
  if (this.isAvailable) this.onSet.fire(key, value, function() {
   try {
    try { localStorage.setItem(key, JSON.stringify(value)); }
    catch(err) { localStorage.setItem(key, value); }
    return true;
   }
   catch(err) {}
   return false;
  }());
  return $this;
 }
 this.remove = function(key) {
  if (this.isAvailable && this.keyExists(key)) this.onRemove.fire(key, this.get(key), function() {
   try { localStorage.removeItem(key); return true; }
   catch(err) { return false; }
  }());
  return $this;
 }
 this.clear = function() {
  if (this.isAvailable) this.onClear.fire(null, null, function() {
   try { localStorage.clear(); return true; }
   catch(err) { return false; }
  }());
  return $this;
 }
 
 // EVENTS
 function setEvent(eType) {
  var eventName = "on" + (eType.charAt(0).toUpperCase() + eType.slice(1)),
   ret = function(handler) {
    if (typeof handler == "function") {
     var $handlers = this[eventName].handlers,
      strHandler = handler.toString().replace(/ |\t|\r|\n/ig, '');
     for (var x in $handlers) if (strHandler == $handlers[x].toString().replace(/ |\t|\r|\n/ig, '')) return this[eventName];
     $handlers.push(handler);
    }
    return this[eventName];
   }
  ret.fire = function(k, v, s) {
   var $handlers = this.handlers,
    args = { eventType: eType };
   if (k !== undefined && k !== null) args.key = k
   if (v !== undefined && v !== null) args.value = v
   if (s !== undefined && s !== null) args.success = s
   args.url = window.location.toString();
   for (var x in $handlers) $handlers[x].apply($this, [args])
  }
  ret.handlers = [];
  return ret;
 }
 this.on = function(a, b) {
  a = "on" + (a.charAt(0).toUpperCase() + a.slice(1));
  this.hasOwnProperty(a) && this[a].apply($this, [b]);
 };
 this.off = function(a, b) {
  a = "on" + (a.charAt(0).toUpperCase() + a.slice(1));
  if (this.hasOwnProperty(a) && "function" == typeof b) {
   var c = this[a].handlers,
    e = b.toString().replace(/ |\t|\r|\n/ig, ""),
    d;
   for (d in c)
    if (e == c[d].toString().replace(/ |\t|\r|\n/ig, "")) {
     c.splice(d, 1);
     break;
    }
  }
  return $this;
 };
 
 this.onGet = setEvent.apply(this, ['get']);
 this.onSet = setEvent.apply(this, ['set']);
 this.onRemove = setEvent.apply(this, ['remove']);
 this.onClear = setEvent.apply(this, ['clear']);
 
 // Final summary, check if LS is even available, if not, throw error and process callback method if provided
 if (!this.isAvailable) {
  var msg = "[localStorage] is unavailble!";
  if (arguments.length && typeof arguments[0] == "function") arguments[0].apply($this, [{ isAvailable: this.isAvailable, Error: msg }]);
  throw new Error(msg);
 }
 
 return this;
}

Go play with it here!