Web Storage And Its Types

We are going to discuss Web Storage and its types in this article step-by-step

Introduction

Web Storage is used to store data in our browser.
Web Storage API stores data at the client-side in the key-value format.
Web Storage is also called DOM Storage which provides many protocols and methods to store data on the browser.

Key – Identifier of the data

Value – The value which is stored corresponding to the key.

Types of Web Storage

There are two types of Web Storage which we used most of the time

Local Storage
Session Storage

Local Storage

Local Storage is used to store data on the client side.
The data which is stored in the local storage has no expiration. It will not be deleted automatically unless the user is deleted manually or programmatically.
Web Storage has 10 Mb of size in most of the browsers to store data which is greater than cookies because in the cookies we can store only 4 KB of data.
While using Local Storage the value must be always in string type when we stored the number it automatically converts and is considered as a string.

How to Store Data in Local Storage

There are multiple methods that are present related to local storage like setItem() is one of the methods which is used to store data in the local storage and it has two parameters one is the name of the key and the second one is the value which is of string type.

Open your browser and press F12 and open the inspect window over there

As you can see in the above image first we use the setItem() method of local storage which is to set the Product as a key and the Laptop as a value inside the local storage and later on, we take the value of the Product using getItem() of local storage which take the key as a parameter and return the value which is present against the key.

If you want to look at the data that are present in the local storage for that open the inspect window and inside the Application Tab and Storage section you can see the local storage section as shown in the below image

As you can see there is one section inside the storage section under the application tab related to local storage and the key and value which is stored 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 see in the above image first we declare one const object and store some product data inside that with the help of key-value pair, later on, 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-parameter to that first is a key name and the second one is the object as productData and then we convert that into the JSON Format using JSON.Stringify() method. Next, using the getItem() method are able to see the data present inside the local storage.

If you want to check the data inside the local storage then go to the local storage inside the application window you can see data as shown in the below image

Also, when we want to read stringified objects then we need to parse that using JSON.parse() method which takes one parameter 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 want to clear local storage for the current web then use the clear() method of local storage which is going to erase all the data which are present inside the local storage as shown below

As you see the clear() method is to erase all the key-value pairs which are present inside the local storage.

So, this is all about Local Storage and its usage of it.

Session Storage

Session Storage is used to store data on the client-side in the key-value pair
The user can able to store data in the Session Storage for is maximum of 5Mb
All the data which is present inside the session storage is available when the current tab is open. Once we close the tab and open the new tab new session will start.
When you refresh or open the new tab and trigger some event then the session will expire.

There are a few methods that are used with Session Storage and It’s syntactically almost similar to the methods of the local storage as shown in below

Also, if you want to see where the data of Session Storage is persisted then open the Inspect Tab after pressing F12, and then inside the Application tab and Storage Section there you can see Session Storage and data stored inside that as shown below

Conclusion

We discussed Web Storage and Its working and later on, step-by-step understand the different types of Web Storage like Local Storage and Session Storage and working of it one by one.

Happy Coding!