---

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