Table of contents
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.
