Understanding WebStorage

WebStorage is one the HTML5 features and it makes the browser capable to store information. Well, we have always been using Cookies, but they have few limitations and let’s see how WebStorage feature can fix these limitations.

Case 1: A user has two different windows opened and he wants to make two transactions on the same site. Using cookies, you could have “leaks” between windows and there is no clear distinction between the windows. WebStorage includes sessionStorage object and each window will have a different copy of this object, making each window being “independent”. As you can tell from the name this object is limited to a session, so as soon as you close your browser window, it will be erased.

Case 2: The site needs to keep information in common across multiple windows and even after the session is closed. Cookies are relative to each request so they can’t handle this case properly. WebStorage includes localStorage object and it’s relative to a specific domain and it lasts even after a session is finished.

Other thing, a cookie can have maximum size of 4Kb, Storage object can have size of 5Mb (quite standardized value in all browsers).

Reading the W3C specs, those are the methods for the Storage objects:

1
2
3
4
5
6
7
8
interface Storage {
  readonly attribute unsigned long length;
  getter DOMString key(in unsigned long index);
  getter any getItem(in DOMString key);
  setter creator void setItem(in DOMString key, in any value);
  deleter void removeItem(in DOMString key);
  void clear();
};

Let’s make some examples to understand better this methods:

1
2
localStorage.setItem("firstKey", "firstValue");
window.localStorage.getItem("firstKey");     //firstValue

This is really a basic use and show us how to use ”setItem” and ”getItem” methods. You can notice how you can use either “localStorage” or “window.localStorage”, this is because localStorage is attached to the window object. Also, the key/value are two strings, or better you can even set an object as value but you’d better ”stringify” it (transforming it in a string using the stringify JSON method). Let’s see an example first trying to push an object in a Storage object without “stringify”:

1
2
   localStorage.setItem("secondKey", {id : 1});
   localStorage.getItem("secondKey"); // "[object Object]"

“[object Object]” is the String we get but we can’t get the real object. That’s how we can fix it:

1
2
3
   localStorage.setItem("secondKey", JSON.stringify({id : 1}));
   var a = JSON.parse(localStorage.getItem("secondKey")); // Object {id=1}
   a.id; // 1

We used JSON stringify method and JSON parse method, that are useful to transform a JSON object in a string and viceversa. JSON object is now available in HTML5, but it’s not fully supported in all browsers, so you may want to download json.js written by Douglas Crockford, Yahoo JS Architect and in my opinion the maximum expert on JavaScript.

Let’s explore other methods available:

1
2
3
4
5
localStorage.removeItem("secondKey")
localStorage.length; // 1
localStorage.key(0); //"firstKey
localStorage.clear();
localStorage.length; //0

they are quite straightforward methods: ”removeItem(index)” will remove the key/value, ”length” will return the number of key/value, ”key(index)” will return the key for that index (0-based), ”clear()” will remove all key/value.

Notice that I’ve been using localStorage in those example but I could use sessionStorage as well, as they share the same methods, coming from the same Interface.

You may meet another object called “globalStorage”, but remember that it’s been removed from the specs from Security reasons. It was basically holding different “localStorage” objects depending on the domain. So now “localStorage” for www.domain.com is different from “localStorage” for “a.domain.com” or “domain.com”.

Other feature is the ”storage” event, which is triggered when the storage has change (using “setItem”, “clear”..). It has few attributes:

  • key : key being changed
  • oldValue : old value of the key before being changed
  • newValue : new value of the key after being changed
  • url : url of the document where the storage has been changed
  • storageArea : storage object being changed (local or session)

Last thing, it’s supported in all modern browsers..and IE8! Suprising!

You wanna know more? Have a read here (great writing from Mark Pilgrim) or have a look at the W3C Specs

Comments