Web Storage : A Ultimate Guide

In this article, We will dive into Web Storage and its features like localStorage and sessionStorage.

There is Different kinds of storage space are available for our data on the client as well as server side.

we can choose any of them according to our need and level of transparency.

Normally, We use HTML5 Web Storage to store data.

What is HTML Web Storage?

By using HTML web storage, web applications can store data locally within the user's browser, before HTML5, application data had to be stored in cookies.

The browser provides different types of storage mechanisms like localStorage, sessionStorage, and cookies to store users' data.

Why is Web Storage needed?

The Storage mechanism enables the website you are visiting to keep track of your movement from one page to another page so that similar information doesn't get asked about what is already given to the website.

Advantages of Web Storage:

• Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.
•  Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.  
  
• Web storage offers advantages compared to using cookies.
  
• The data is saved locally only and can't be read by the server, which eliminates the security issue that cookies present.
  
• It allows for much more data to be saved (To 5MB for most browsers).
  
• It's simpler to use and the syntax is very straightforward.
  

Ways of using Web Storage:

Both localStorage and sessionStorage are part of the web storage API, which stores the data in the format of key/value pairs locally.

The same syntax works for localStorage and session Storage both.

What is localStorage?

This is a type of web storage that allows websites/applications to store and access data in their browsers indefinitely.

This means that the data stored in the browser will be preserved even after you close the browser window.

local storage is property for accessing Storage object, which is used to store and retrieve data from user's browser.

It is accessible only at client side not at server side like cookie.

Data stored in localStorage is accessible thought all pages under same domain, until user does not delete it manually.

Even though user closes the browser, data will be accessible next time.

Syntax:

Add/Update localStorage:

You can add or update localstorage item using setItem method

localStorage.setItem(key, 'valye');
Deleting Entriles:

To delete localstorage item, use removeItem method with the key.

localStorage.removeItem(key);
Clear Everything:

To clear all localstorage items you can use clear method.

localStorage.clear();

What is sessionStorage?

The session Storage object is equal to the localStorage object, except that it stores the data for only one session means the data is deleted when the user closes the specific browser tab.

Syntax:

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');
 
// Get saved data from sessionStorage
let lastname = sessionStorage.getItem('key');
 
// Remove saved data from sessionStorage
sessionStorage.removeItem('key');
 
// Remove all saved data from sessionStorage
sessionStorage.clear();

Difference between localStorage and sessionStorage:

LocalStorage:

• Data stored in localStorage has no expiration date and can only be deleted by JavaScript or by clearing the cached / locally stored data in your browser.
• The data stored in localStorage will survive until it is explicitly deleted.
  
• The changes you make are saved and available for access to all current and future websites.
  
• It Works according to the same-origin policy. Therefore, the stored data is only available in the same origin.  
  

SessionStorage:

• The data is stored for an only session. That is, the data is saved until the browser (or tab) is closed.

• No data is transferred to the server.
• Changes are only available per window (or a tab in a browser such as Chrome or Firefox). All changes made are saved and can be used in the same window for access to the current page and future sites.
  
• The memory is cleared as soon as the window is closed.

How to check if does browser supports web storage?

For checking web storage supports by browser you can use window object like this:

if(window.localStorage){

//Means local Storage is supported by browser

}

Conclusion:

  The localStorage and sessionStorage perform similar tasks, but with some very basic differences.