Web Storage is a client-side storage. It allows users to persist data in the form of key/value pairs. Before it, Web Developers used cookies for storing objects/data locally in the user's or client's machine. Web Storage is much similar to cookies but we can store a greater amount of data using web storage and it is very secure.
One of the Important points is that Web Storage is browser-specific. Let's understand that with an example. Suppose the user visits your site using Chrome, then any data that was stored to Chrome's Web Storage Store is available with the Chrome browser but not with other browsers. If the user revisits your site with a different browser, then the data saved within Chrome's Web Storage is unavailable in the other browser. So, Web storage is browser-specific and each browser's storage is separate and independent.
Types of Web Storage
There are the following two types of HTML5 Web Storage:
- Local Storage
- Session Storage
A Local Storage object stores the data with no exipration date; that means the stored data will not be deleted even after the browser is closed. A session storage object is very similar to Local Storage. The only difference between Session Storage and Local Storage is that Session Storage data is deleted when the browser is closed by the user.
Some Common method and properties for local and session storage are:
Example: Storing and retrieving data from Local Storage
First, we need to check whether the browser supports Web Storage or not. If it is supported than we call the setItem method of localStorage and the key/value pair. Then we retrieve the value from localStorage using the getItem method and display it in div (output).
Viewing Web Storage data using Web inspector
1. Right-click in the body of the Web Page and then click on Inspect Element. (You can also get the same from "Tools" -> "Developer Tools".)
2. Then click on the resource tab, than click on Local Storage.
Now you are able to see the data (key/value pairs) that we have added recently. If you double-click on the value in the Web Inspector then you find that you can actually modify the value stored there.
I hope you like it. Thanks