Storing data with Javascript, using localStorage and cookies

There are currently several techniques for storing/saving data and values which transcend a browsing session (offline data). Technique has slightly different results.
In this post we will be looking at the implementation of Cookies, LocalStorage, HTML5 Storage using browser native languages (javascript, html5).

Cookies have been around for some time and are a useful way to store data for a particular url.
example: a website wants to store the users name which was obtained from a form. The name can be accessed for a set period of time should the visitor return to the page. If the user visites a different page within the site, that new page wont have access to the cookie. In this case you could append a query string to the url and pass the parameter to the new page, although doing so is cumbersome compared to the local storage option.
Regardless, cookies are a great way for a web apps which (don’t refresh the page) to manage stored data.

Cookies

Create a class called cookies.js and paste in the following code and import it into your site


/* ------------------------ */
/* ---- Implementation ---- */
/* ------------------------ */

var cookieManager = {
  set: function (name, value, expireDays) {
    var expireDate = new Date();
    expireDate.setDate(expireDate.getDate() + expireDays);

    document.cookie = name + "=" + escape(value) +
      ((!expireDays) ? "" : ";expires="+expireDate.toGMTString());
	  console.log("cookie saved :"+value);
  },

  get: function (key) {
    var start,end;

    if (document.cookie.length > 0) {
      start = document.cookie.indexOf(key + "=");

      if (start != -1) {
        start = start + key.length + 1;
        end = document.cookie.indexOf(";",start);

        if (end == -1) {
          end = document.cookie.length;
        }
        return unescape(document.cookie.substring(start,end));
      }
    }
    return "";
  },

  remove: function (key) {
    this.set(key, '', -1);
  }
}

From another javascript location you can get, set and remove the cookie values with the usage below


/* ------------------------ */
/* --------- Usage -------- */
/* ------------------------ */

// Store a key/value for 1 day:
cookieManager.set('name', 'a value', 1);

// Retrieve a value associated to a key:
var value = cookieManager.get('name');

// Remove a key/value:
cookieManager.remove('name');

HTML5 Local Storage

local storage can store up to 5megs on the users hard drive
The functionality seems to be limited to handle only string key/value pairs, so its necessary to stringy and parse the data with JSON to avoid unexpected results.

local storage will allow you to access a stored value globally from any location.

/* ------------------------ */
/* ----Implementation ----- */
/* ------------------------ */
var Storage = {
    set: function(key, value) {
        localStorage[key] = JSON.stringify(value);
    },
    get: function(key) {
        return localStorage[key] ? JSON.parse(localStorage[key]) : null;
    }
};

/* ------------------------ */
/* --------- Usage -------- */
/* ------------------------ */

//save data
 Storage.set('myObj', myObj);

//get data
myObj = Storage.get('myObj') || defaultValue;

jStorage

For older browser compatibility there are libraries such as jstorage which might be better suited depending on requirements

// set value
$.jStorage.set(key, value)

//get value
value = $.jStorage.get(key)
value = $.jStorage.get(key, "default value")

Storing data with Javascript, using localStorage and cookies