Difference between sessionStorage and localStorage

 How to use sessionStorage and localStorage

 SessionStorage and LocalStorage is client storage solutions.   localStorage and sessionStorage both can be cleared by user and can easily read by user . You should not rely on these  and should not store sensitive data into localStorage and sessionStorage its easily readable by user.  Its good when data needed within client scripts between pages (for example: preferences, menus, last login, last page view). ,


Now explore SessionStorage and LocalStorage in details

SessionStorage  - The sessionStorage object is use to store data into client browser. sessionStorage is only available for the duration of the browser session and is deleted when the window is closed. sessionStorage depend upon session of a page. Page session maintain till user not open new tab or window or not reloads page.

If user open a page in a new tab or window and reloads page, it will create new session.
That means sessionStorage can't be shared between tabs and window.
sessionStorage is only available for the duration of the browser session and is deleted when the window is closed.

SessionStorage Methods

setItem - setItem is used to create new storage into browser. Its combination of key/value.
getItem - getItem is used to get value of given key.

Syntax

// store data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get data from sessionStorage
var data = sessionStorage.getItem('key');


Example

The following example storing "LastRefreshTime" into session with "10.20.03" valuedata into sessionStorage

sessionStorage.setItem('LastRefreshTime', '10.20.03');

LocalStorage -localStorage object is also store information into clients browser. The main difference is that localStorage has no expiration time.  localStorage data persist till user not clear data or reset browser. Means user clear data from browser.

That means localStorage can't be shared between tabs and window. If you need stored data into different tabs and windows then localStorage is preferred then sessionStorage.

LocalStorage Methods

setItem - setItem is used to create new storage into browser. Its combination of key/value.
getItem - getItem is used to get value of given key.

Syntax

// store data to sessionStorage
localStorage.setItem('key', 'value');

// Get data from sessionStorage
var data = localStorage.getItem('key');


Example

 The following example show you to save "LastProfileUpdate"
.
localStorage.setItem('LastProfileUpdate', '24 June 2015');