What is Web storage in html5

Hello friends today I am going to talk about the power of web storage, It comes in HTML5 with performance feature you can store your data in web storage and next time you don’t need to pull your data from server, you can easily get your stored data from web storage. You can do lot more things with web storage. Before HTML5 it is hard to store data in user’s browser. Web storage is secure, and large amounts of data can be stored locally.
web-storage

Benefits of using web storage

* The user has complete control over access to your files and therefore it is really secure in comparison to an online storage where you don’t know where your data is stored and who has access to your data
* The data can be accessed easily and quickly
* The user does not require an internet connection to access the data.
* Improved website performance.


There are two types of web storage.

1. Local (Cookie) Storage
2. Session storage

Local (Cookie) Storage

Cookie Local storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.

Storing and retrieving data from local storage.

first check, Is it your browser support web storage or not.

if (typeof(Storage) !== "undefined") {
    // Awesome! Web Storage supported by browser .
} else {
    // Sorry! No Web Storage support..
}

Storing data in local storage.

Using setItem() function to store data in local storage you can also store array and json in localstorage.

localStorage.setItem("fullname", "Rohit Kumar");
localStorage.setItem("email", "[email protected]");
localStorage.setItem("website", "www.iamrohit.in");

Retrieve data from local storage.

Using getItem() function to fetch data from local storage.

console.log(localStorage.getItem("fullname"));
console.log(localStorage.getItem("email"));
console.log(localStorage.getItem("website"));

Deleting local storage.

delete specific key only

window.localStorage.clear('website');

delete all localstorege

window.localStorage.clear();



Session Storage

Session storage is just like local storage but it stores data for limited period, As soon as you close the website tab it automatically destroy session storage.

Storing data in session storage.

Using setItem() function to store data in session storage you can also store array and json in session storage.

sessionStorage.setItem("fullname", "Rohit Kumar");
sessionStorage.setItem("email", "[email protected]");
sessionStorage.setItem("website", "www.iamrohit.in");

Retrieve data from session storage.

Using getItem() function to fetch data from session storage.

console.log(sessionStorage.getItem("fullname"));
console.log(sessionStorage.getItem("email"));
console.log(sessionStorage.getItem("website"));

Deleting session storage.

delete specific key only

window.sessionStorage.clear('website');

delete all session storage

window.sessionStorage.clear();

If you like this post please don’t forget to subscribe my public notebook for more useful stuff

2 Replies to “What is Web storage in html5”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.