What are the different types of storage in HTML5 ?
In this article, you will get to know about different types of Web storage in HTML5. The web storage is more secure and large amounts of data can be stored locally on the client-side web browser. All the data is stored in key-value pairs.
In HTML5 there are two types of web storage API.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
localStorage: It is used to store data on the client-side. It has no expiration time, so the data in the LocalStorage exists always till the user manually deletes it.
- For storing data in web storage: The key and value both should be string or number;
- For getting data from web storage: We will pass the key and it will return value.
Stored data on Local Storage :
We can clearly see that local storage items are stored in the form of key/value pair and you can check by inspecting elements on the web page and then go to the Application option where you will find the local storage.
As the localStorage object stores the data with no expiration date, you can cross-check this by closing the current tab and visit the same page again, you will find the same data is present in localStorage of that tab or window.
Session Storage: It is used to store data on the client-side. Data in the SessionStorage exist till the current tab is open, if we close the current tab then our data will also erase automatically from the SessionStorage.
- For storing data in web storage:
- For getting data from web storage:
Stored data on Session Storage :
As the sessionStorage object stores the data with the expiration date, you can cross-check this by closing the current tab and visit the same page again, you will find that data is empty in sessionStorage of that tab or window.