What is Web Storage(Local storage, Session storage)?

By January 29, 2018 Html No Comments
local storage and session storage

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?

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.

2. getItem(key): it’s returns the value of an provide key.

3. removeItem(key): used to delete an item with a particular key.

4. clear(): removes all key/value pairs from the localStorage object

 

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.

2. getItem(key): It returns the value of an provided key.

3. removeItem(key): It is used to delete an item with a particular key.

4. clear(): removes all key/value pairs for the sessionStorage object.

 

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.

 

 

 

 


About Vijay Dhanvai

A passionate blogger by heart and mind, I have been working in this field for 7 years now. A WordPress Professional, web developer and designer who intends to guide his readers about Web Design, WordPress, Blogging, Web Development, and more.

Leave a Reply