Web Storage in HTML (5)

In newer version of HTML (so called HTML 5), we have two new mechanisms introduced to store structured data related to session cookies and cookies.

1. Session Storage (sessionStorage)
2. Local Storage (localStorage)

As the name specifies, local storage is for the long term  and session storage is only limited to that particular session.


Session Storage


Session storage allows to save data on the client side persisting for that particular session only. Data can be saved on the client side and shared between multiple pages during that session but once session is closed, all the stored data on the client side is deleted and is never accessible again. This also helps in differentiating the two different windows of the same site opened on the same machine and maintaining their instance without being affected with the activities on the other window. So i would think its right to say that session storage is dependent on combination of session id and site id together.


Note : The lifetime of a browsing context can be unrelated to the lifetime of the actual user agent process itself, as the user agent may support resuming sessions after a restart.


Local Storage


Local storage allows to save data on the client side for the longer duration for the returning users. Local storage data is save on the client side and is only dependent on site id. With local storage, changes made on the one site window will affect on the other window opened on the same machine.


The API



Web storage provide list to key/value pair called items.Keys are strings. Any string (including the empty string) is a valid key. Values are similarly strings.


Adding Item  - Insert new item in the storage 
sessionStorage.setItem(key, value)
localStorage.setItem(key, value)


Retrieving Item - Retrieve item from the storage 
sessionStorage.getItem(key)
localStorage.getItem(key)


Removing Item - Removes item for the storage 
sessionStorage.removeItem(key)
localStorage.removeItem(key)


Clear - Removes all the items for the storage 
sessionStorage.clear()
localStorage.clear()


Length - Get the count of items in the storage
sessionStorage.length
localStorage.length

Code Example

To check whether local or session storage is supported

// Check for the browser supports session storage

if ("sessionStorage" in window && window["sessionStorage"] != null) {

    // Session storage supported

}

// Check for the browser supports local storage

if ("localStorage" in window && window["localStorage"] != null) {

    // Local storage supported

}

// Write to session storage

sessionStorage.setItem("language", "en-us");

// Read from session storage

var sessValLang = sessionStorage.getItem("language");

// Removing session storage item

sessionStorage.removeItem("language");

// Write to local storage

localStorage.setItem("language", "en-us");

// Read from local storage

var locValLang= localStorage.getItem("language");

// Removing local storage item

localStorage.removeItem("language");

Click here for the demo ...

P.S. This is my first post, please feel free to guide me or correct me for betterment ... Thanks in advance.