The web storage API is used by developers to store some data in the web browser and this data is nothing but key-value pair of strings.

There are two mechanisms to store the data,

• Local Storage
• Session Storage

Local storage

Local storage stores a larger amount of data on the client's computer in a key-value pair format and has no expiration date. Data is never transferred to the server and is accessible via JavaScript and HTML5.

• Capacity: 10MB
• Accessible from Any window
• Expiration: Never
• Storage location: Browser only
• Sent with requests: No
• Blockable by users: Yes
• Editable by users: Yes

Session storage

The data is persisted only for a particular session and expires the data on tab close. Data is never transferred to the server and is accessible client-side from the same tab.

• Capacity: 5MB
• Accessible from the Same tab
• Expiration: On tab close
• Storage location: Browser only
• Sent with requests: No
• Blockable by users: Yes
• Editable by users: Yes

Cookies

Cookies store small amounts of data that has to be sent back to the server with HTTPS requests from either server or client. They are primarily used for server-side reading.

Cookie is a small piece of information that stores multiple client's requests. There are 2 types of cookies

Non-persistent cookie: Valid for a single session

Persistent cookie: Valid for multiple session

Cookies are invented to solve the problem "How to remember information about the user"

• Capacity: 4KB
• Accessible from Any window
• Storage location: Browser and server
• Sent with requests: Yes
• Blockable by users: Yes
• Editable by users: Yes
• Expiration: Manually set

Javascript can create, read and delete cookies with the

document.cookie property.

allCookies = document.cookie;    // Read all cookies accessible from this location

document.cookie = newCookie;  // Write a new cookie

Session storage is very important than cookies because session storage has a larger capacity to hold data.

Memory Capacity

The memory capacity actually depends on what type of device users are using, what type of browser users are using. It totally depends on it.

=> Origin --> Protocol + Host + Port

when the port changes or the host changes or the protocols changes the origin changes and the Local storage for each and every origin is different in the browser.

Local storage has to highest memory capacity compared to Session storage, Cookies.