What is Web Storage API?
Web Storage API is used by developers to store the data into the client machine (Web browser) and this data is just a key-value pair of strings or a very big object which only contains the strings.
So basically there are two mechanisms to store the data,
- Session Storage
- Local Storage
Session Storage
As the name says session storage means to store the data for a persistent time, or it maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores). Session storage is more useful than cookies; unlike cookies, session storage data is not being sent to the server while making the network request calls and also this session storage has a larger capacity to hold data. In cookies, for example, we can just store some 4000 bytes of data while in session storage you can store 5MB, and that is a lot.
Local Storage
Local storage is the same as session storage but the advantage is there is no expiry time for local storage so when the user closes the browser or reloads the page, when he shuts down the system the same data still persists in the browser. We can keep the data as long we want.
If we talk about memory capacity, local storage has more memory capacity in comparison to session storage. Memory capacity depends upon the device which you are using. Many big companies are storing the data into the user's browser like Amazon, Paytm. Local storage is much faster to get the data from a network call. We can see the stored data in the Application tab (developer mode), and the most important thing regarding web storage APIs is that they follow the same-origin policy.
Sample Code for using Local Storage:
-
- localStorage.setItem("myName", "Abhishek");
- or
- localStorage.myName = "Abhishek";
-
- let name = localStorage.getItem("myName");
- or
- let name = localStorage.myName;
Thank You!