Web Storage

W3C has defined a webstorage spec which deals with the task of storing data on the web clients. Prior to this spec, developers used to store key/value pairs in cookies.

Cookies are good but they have few drawbacks like the maximum amount of data(4kb) per domain and all cookies are sent to server along with each request adding to request overhead.

Webstorage solves this problem by allowing storage size of minimum 5mb per domain, also the data stored in the storage is not passed to the server with every request.

All major browsers picked up the spec and implemented the Storage interface.

Storage Interface from the spec:

interface Storage {
  DOMString key(unsigned long index);
  getter DOMString getItem(DOMString key);
  setter creator void setItem(DOMString key, DOMString value);
  deleter void removeItem(DOMString key);
  void clear();
  readonly attribute unsigned long length;
};

Support

The WebStorage is supported by IE8+, Chrome 5, Firefox 3.5, Safari 4, Opera 10.

Use Cases for Data Storage

There are two use cases for storing data on the client. 1] Storing data for a sesssion (Session Storage)
2] Storing data utill it is removed by develper or user by deleting the data manually. (Local Storage)

Session Storage Object

This stores data for a session, untill the user closes the browser/tab. The data is available till the window is not closed. It allows separate instance of same application to run in different windows independently. The data is lost once we close the browser/window. The data is available only from the page which stored the data. The session storage object is available under the window object in javascript.

Local Storage Object

It allows the data to be presisted even after the browser is closed. Its available to all the scripts loaded from the same domain. The data remains there until some script is used to remove it. The localStorage object is available under the window object.

Both local and session storage object implement the Storage interface and have same methods. They differ in the scope and lifetime of the data.

Storage Event

An storage event is fired on the window object when something changes in any of the storage objects. Method like set, clear, remove can trigger storage event.

From the spec:

interface StorageEvent : Event {
  readonly attribute DOMString key;
  readonly attribute DOMString? oldValue;
  readonly attribute DOMString? newValue;
  readonly attribute DOMString url;
  readonly attribute Storage? storageArea;
};

Storage event has following attributes:

• key - the key which was added, removed or modified
• oldValue: old value
• newValue: new value
• url: the url of the page which triggered the change
• storageArea: localStorage/sessionStorage

Storage Event can be used to keep multiple window/tabs in sync. For example if we change a property in localStorage the storage event will fired on all the windows which have the site open. So the change in one window can be propogated to other windows.

While reseaching the possibility of using persistent for out product at Mygola, i came across Amplifyjs.

Storage types

1. localStorage
2. sessionStorage
3. globalStorage
4. userData
5. memory

Jsfiddle regarding the usage of Amplify to store data can be found at here

How to see whats there in Storage Objects

1. Firefox: Firebug -> Dom tab
2. Google Chrome: Developer Tools -> Resources Tab
3. Opera: Storage Tab in dragonfly

For browsers which does not support Web Storage, we have an option to use Amplify.js or other polyfills listed at Modernizr wiki.

More Information

• WebStorage
• Mozilla Dom Storage
• Treehouse