Local Storage & Session Storage

In case we need to store some data in the form of key/value pairs we may use local storage or session storage. Web storage objects are not sent to server with each request. Most modern browsers allow at least 5 megabytes of data (or more) and have settings to configure that. The storage is bound to the origin (domain/protocol/port triplet). That is, different protocols or subdomains infer different storage objects, they can’t access data from each other.

Local Storage - Data isn't cleared when the user closes the Website tab or shuts down the system.

localStorage.setItem('name', "Vineeta");
console.log(localStorage.getItem('name'));

Session Storage - Data is available only for that particular session. As soon as a user enters a website, the session storage is started, when that website tab is closed by user the session storage is lost. (PS : Session storage can survive a page refresh though).

sessionStorage.setItem('name', "Vineeta");
console.log(sessionStorage.getItem('name'));

Both key and value must be strings.

Advantages of Web Storage API

(1) Data stored locally in browser & not ready/sent by/to server - no security issues.

(2) We can store >5 Mb of data which is much larger than what cookies provide.

Cookies