Frond End Data Storage

  |   Source

Reference List

Cookie is the most efficient method of remembering and tracking small amount of information in client side.

Web Storage

Web storage is for large amount of data.

So far, Web storage is widely supported by most browsers, from IE8 to most of mobile browser(except Opera Mini). So when I needs to store a large amount of data with capability requirement for most browsers, this is currently my best choice.

There are two parts of web storage: local storage and session storage.

Data for web storage are passed by key-value pair.

Local Storage

Compared to session storage, local storage has no expiration time.


localStorage object can be used directly. Like window.localStorage.

To remove a key-value pair, use remove('key'), like localStorage.remove('lastname').

to clear all key-value pair, use localStorage.clear().

getItem and setItem

getItem('key','value') and setItem('key','value') is used to get/set data item.

Here is an example from W3CSchool:

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Use direct attribute

Another way is to assign attribute to localStorage object:

// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

Session Storage

Following a difference between local storage and session storage:

  • For session storage, data are lost after session end. i.e. data are delete after use close a browser window/tab.

  • For session storage, opening a page in new tab or window will cause a new session to be initiated.


The way to use session storage is the same as the way to use local storage, except the object is now window.sessionStorage.

Comments powered by Disqus