Javascript Localstorage wrapper

Javascript localstorage wrapper

Hallo und Willkommen zu meinem kleinen Tutorials zur Benutzung des localstorage.
Zuerst einmal möchte ich kurz klären was der localstorage eigentlich ist.

Mit dem neuen localstorage könnt ihr auf einfache Art und weise Daten im Browser auf Clientseite speichern.
So gibt es nun eine weiter Möglichkeit außer über Cookies Daten im Browser zu hinterlegen und beim nächsten Zugriff wieder anzuzeigen.
Wichtig! Der Localstorage ist bei den meisten Browsern auf 4MB begrenzt.

chrome4+
ff  3.5+
Safari  4+
Opera 10.5+
IE 8+
IOS 3.2+
Android  2.1+

Eine gute Referenz zum Localstorage befindet sich unter https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

Hier mein Beispiel für eine wrapper Klasse.
Mit diesem Beispiel ist es möglich ganze Objecte in den Localstorage zu speichern und wieder auszulesen

 

/**
 * Created by Matthias Herzog on 10.06.2014.
 * Speicher belibige werte im Localstorage des Browsers serialisiert ab.
 * @type {Storage}
 */
Storage = new function()
{

   if( !window.localStorage  )
   {
      console.warn("No local storage Support!");
      return false;
   }
   var Store = window.localStorage;

   /**
    * gibt einen vorhandenen wert aus dem localstorage zurück
    * @param Key
    * @returns {{}|boolean}
    */
   this.get = function(Key)
   {
      var Temp = Store.getItem( Key ) || false;
      if(Temp == false)
      {
         var Result = {} ;
      }
      else
      {
         try
         {
            var Result = JSON.parse( Temp );
         } catch( Ex )
         {
            var Result = Temp;
         }
      }
      return Result;
   };

   /**
    * setzt uns serialisiert einen wert
    * @param Key
    * @param Value
    */
   this.set = function( Key, Value )
   {
      if(!Value || !Key) return;

      var Temp = {};
      if(typeof Value == "object")
      {
         Value =  JSON.stringify( Value );
      }
      Store.setItem( Key, Value );
   };

   /**
    * entfernt alle daten aus dem Localstorage
    */
   this.clearAll = function()
   {
      var Keys = Object.keys(localStorage);
      for(var i = 0; i < Keys.length ; i++)
      {
         this.clear( Keys[i] );
      }
      return true;
   };

   /**
    * entfernt den angegeben schlüssel aus dem localstorage
    * @param Key
    */
   this.clear = function(Key)
   {
          if( !Store.getItem( Key ) ) return false;
          Store.removeItem( Key );
          return true;
   };
};

benutzen könnt ihr die Klasse wie folgt.

// legt ein Object mit dem Schlüssel in den Storage ab.
var storage = new Storage();
storage.set( „User“, {Name : „Horst“, LastName: „Werner“} );

// um auf den wert wieder zuzugreifen benötigt ihr die get fkt
var User = storage.get( „User“ );

 

Vielen Dank fürs lesen!