LocalStorage, sessionStorage and cookies in JavaScript?


localStorage, sessionStorage and cookies in JavaScript

Cookie. localStorage and sessionStorage are used to data strogae on client side. In HTML5, introduced web storage such as localStorage or sessionStorage.

Web storage objects localStorage and sessionStorage used to store the data in the browser in key/value, key and value must be strings. Cookies (web cookie, browser cookie) are small text files, data stored as name-value pairs on visitor's browsers.

Difference between localStorage, sessionStorage, and cookies?

Cookies

  1. The cookie is persistence, user can set expiration time to removed.
  2. Cookie work for old browsers.
  3. Data is sent back to the server on each HHTP request (HTML, JavaScript, CSS, Images, etc), It's increases the traffic between client and server.
  4. We can secured Cookies by setting the httpOnly flag as true for prevents client-side access.
  5. Single cookie use space upto 4 KB
    Size of Cookie:(81920 = 20* 4096) bytes per domain.
    Total Cookies : 300
    Per Cookie : 4096 bytes (4KB)
    Per Domain : 20 cookies

localStorage

  1. localStorage persists until explicitly deleted, data are saved current and future visit of website.
  2. localStorage works for latest browsers.
  3. Shared data between all tabs and windows from the same-origin policy.
  4. Store the data 5-10 MB depend on browsers.

sessionStorage

  1. Data is available for current Tab only once Window or Tab is closed data is deleted.
  2. localStorage works for latest browsers.
  3. Data survives on page refresh, removed on closing the tab.it works on same-origin policy.

How to use localStorage and sessionStorage ?

Both localStorage and sessionStorage are use key-value pair.

Synatx

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

//retrieve the data/value:
localStorage.getItem('key');

//update the data/value (same as store the data):
localStorage.setItem('key','value');

//remove the item
localStorage.removeItem('key');

//clear all the data:
localStorage.clear();

Example 1- data store in key/value pair

localStorage.setItem('name','Vipin Katiyar');
localStorage.getItem('name');
localStorage.removeItem('name');
localStorage.clear();

Example 2- data store like object access
//store the data
localStorage.name = 'Vipin Katiyar';

//retrieve the data
alert(localStorage.name ); // Vipin Katiyar

//remove the key
delete localStorage.name;

Example 3- for Object data store

// for objects used JSON because it's store only string values
var person = {
  name: 'Vipin Katiyar',
  age: '32 Years',
  qualification: 'MCA'
}
localStorage.setItem('person',JSON.stringify( person ));
 
//retrieve the data of objects:
var person = JSON.parse( localStorage.getItem( 'person' ) );
alert(person.name); // Vipin Katiyar

LocalStorage, sessionStorage and cookies

  Cookies localStorage sessionStorage
Expires Manually set No Yes(Tab closed)
Accessible/Storage server-side/client-side client-side client-side
Clear/Delete PHP, JS and Automatic JS JS and Automatic
Secured No No No
SSL Support Yes No No
Data Transfer on HTTP Request Yes No No
Browser support Old/Latest Latest Latest
Data Accessible on Client Side Window Current tab Window
Maximum Sata Size 4 KB 5-10 MB 5 MB


Related

String Concatenation in JavaScript
Tag Template literals (Strings) in JavaScript
Destructuring assignment in JavaScript
Difference between null and undefined in JavaScript
How to play multiple video in loop using HTML5 and JavaScript