In this essay, we will go through Web Storage and its many forms step by step.
Introduction
Web Storage is a technique for storing data in our browser.
The Web Storage API saves data in key-value format on the client side.
Web Storage, also known as DOM Storage, offers a variety of protocols and methods for storing data on the browser.
Key – The data’s unique identifier.
Value – The value saved in relation to the key.
Web Storage Type
We used two forms of Web Storage the majority of the time.
- Session Storage
- Local Storage
Local Storage
-
Data is stored on the client side via Local Storage.
-
Data saved in local storage has no expiration date. Unless the user is deleted manually or programmatically, it will not be erased automatically.
-
Web Storage has a storage capacity of 10 Mb in most browsers, which is more than cookies, which can only store 4 KB of data.
- When using Local Storage, the value must always be in string format. When we save a number, it immediately transforms and is treated as a string.
Data Storage in Local Storage
As shown in the preceding image, we first use the setItem() method of local storage to set the Product as a key and the Laptop as a value inside the local storage, and then we take the value of the Product using the getItem() method of local storage, which takes the key as a parameter and returns the value that is present against the key.
If you want to look at the data that is present in the local storage, open the inspect window and navigate to the Application Tab and Storage section, as shown in the figure below.
As you can see, there is one part under the application tab relating to local storage and the key and value that is saved in the key-value format.
We can store only string objects in local storage, but if we want to store any object in the local storage then there is one method called JSON.Stringify() which takes an object and converts that into the JSON Format and then stores it inside the local storage.
As you can see in the above image, we first declare one const object and then store some product data inside it using a key-value pair. Later, we use the setItem() method which is of local storage and use to set the data inside the local storage and you can see we pass two parameters to that, the first being a key name and the second being the object as productData, and then we convert that into JSON format using the JSON.Stringify() method. The data in the local storage may then be seen using the getItem() function.
If you want to look at the data in the local storage, go to the local storage inside the programme window and look at the data as shown in the image below.
Also, while reading stringified objects, we must parse them using the JSON.parse() function, which accepts one argument as an object.
Also, to remove the item there is one method to removeItem() which take the key as a parameter and remove the key against that key.
If we wish to clean local storage for the current web, we may use the clear() function of local storage, which will wipe all data from the local storage, as shown below.
As you can see, the clear() function deletes all key-value pairs stored in the local storage.
So that’s everything for Local Storage and how it’s used.
Session Storage
-
Session Storage is used on the client side to store data in key-value pairs.
-
The user can save data in the Session Storage for up to 5Mb.
-
When the current tab is open, all of the data in the session storage is accessible.When we shut the old tab and open the new one, a new session will begin.
- The session will expire if you refresh or open a new tab and trigger some event.
There are a few methods used with Session Storage that are syntactically virtually identical to the techniques used with local storage, as indicated below.
Also, if you want to check where Session Storage data is saved, open the Inspect Tab after hitting F12, and then under the Application tab and Storage Section, you can see Session Storage and data stored inside there, as seen below.
