What is HTML5 Web Storage (Local storage, Session storage)?
The HTML5’s web storage offers a new mechanism to store data locally on the user’s browser. It just like cookies but have more benefits over cookies. HTML5’s Web storage provides more security with stored data, and large amounts of data can be stored locally on user browser, so you don’t need to make again and again HTTP request to server and get response, so it can save request and response time.
In Cookies you can store very tiny data amount near 4KB to 5KB only, while in web storage you are able to a large amount of data around 5 MB.
There are two types of HTML5’s web storage offers, and they differ in scope and lifetime:
1. Local storage or localStorage Object:
The local storage uses localStorage object to store data with no expiration date. That means the data stored in localStorage object in browser will be accessible for the next day, the next week, or the next year until you remove it. The data will not be deleted when the browser is closed.
Demo – How to create a local storage and how to access its value?
1 2 3 4 5 |
// saving data into local storage localStorage.setItem('LocalStorageKey', 'txtBoxValue'); // getting data from localstorage using key var retrivedValueLS = localStorage.getItem('LocalStorageKey'); |
Local Storage Methods:
Now let’s more understanding about how we can create, update and perform other operation on Local Storage using various JavaScript methods.
1. setItem(key,value): used to create session variable with key and value pair.
1 |
localStorage.setItem("name", "w3reign"); //name is the key, w3reign is the value |
2. getItem(key): it’s returns the value of an provide key.
1 |
localStorage.getItem('name'); // name is the key that returns it's value |
3. removeItem(key): used to delete an item with a particular key.
1 |
localStorage.removeItem("name"); // name is the key |
4. clear(): removes all key/value pairs from the localStorage object
1 |
localStorage.clear(); |
2. Session storage or sessionStorage Object:
The session storage uses the sessionStorage object to store data, as name indicate data wiil store in session storage on a temporary basis for a single window or any tab. The data will delete/remove when session ends, means when the user closes that window or tab session storage data will be expire or delete.
Session Storage Methods:
Now let’s more understanding about how we can create, update and perform other operation on session storage using verius javascript methods.
1. setItem(key,value): used to create session variable with key and value pair.
1 |
sessionStorage.setItem("name", "w3reign"); //name is the key, w3reign is the value |
2. getItem(key): It returns the value of an provided key.
1 |
sessionStorage.getItem('name'); // name is the key that returns it's value |
3. removeItem(key): It is used to delete an item with a particular key.
1 |
sessionStorage.removeItem("name"); // name is the key |
4. clear(): removes all key/value pairs for the sessionStorage object.
1 |
sessionStorage.clear(); |
Now hope, you have a clear understanding about What are HTML5 Session Storage and Local Storage and what’s difference between Local and Session storage.
[paypal-donation]