JavaScript

localStorage and sessionStorage | Explained

The Web API and the Web Storage API are two of the most useful APIs that are supported by most browsers, The Web Storage API proves two objects the localStorage storage and the sessionStorage which help us store our data into the browser’s memory. Both of these objects allow us to store data locally, with the only difference being that with the sessionStorage object, the data is automatically deleted when the sessional expires, whereas with the localStorage object the data is permanently saved.

These objects can be considered as alternatives for cookies and have their advantages over cookies as well, saying that these objects can overtake cookies completely is not true. Cookies can be read by servers and other web applications whereas the data stored locally on your browser can not be read by any server this provides security benefits.

localStorage and sessionStorage | Syntax

Both of these objects have identical functions with identical syntaxes. The syntax for the localStorage object is defined as

localStorage.function(key, value);

Similarly, for sessionStorage object, the syntax is defined as

sessionStorage.function(key, value);

Functions provided by localStorage & sessionStorage

Both of these objects from the Web Storage API provide 5 functions and a const variable as:

  • setItem(): To store a new entry in the local storage in the form of key-value pairs
  • getItem(): To fetch an entry from the local storage by using its key
  • clear(): To clear the local storage of the browser
  • remove(): To remove a value from the local storage using a key
  • key(): To return the name of the key using its index value
  • length(): A variable that stores the number of entries in the local storage

localStorage and sessionStorage | Usage

To demonstrate the use of Web Storage API, open the browser of your choice (chrome in our case) and visit a site like www.google.com.

How to Create/Add data in localStorage using setItem() method

Create a new data entry in the local storage by typing in the following line of code in the console of the browser:

localStorage.setItem("Name", "John Doe");

If the command executes without any error, this means that a new entry was successfully made in the browser’s storage.

To verify this, go to the “applications” tab in the developer’s tools and expand local storage. You should be able to see the value in the explorer:

How to Access/Get data from localStorage using getItem() method

To access any entry from the local storage, you can either use a dot-operator with the localStorage object and then enter the key or use the getItem() function. To access the “Name” we just stored, we can either use:

var name = localStorage.Name;
console.log(name)

The output is as:

Or we can use the command as shown:

console.log(localStorage.getItem("Name"));

The output is as

Permanent storage of the localStorage object | Verification

To verify that the localStorage object stores data permanently (until removed manually), close the browsers that had previously opened up the link where you stored some data (in our case it was google.com)

You have ended the golden handshake and terminated the current sessions with the website by closing the browsers, reopen the browser and head over to the same website and then go into developer tools > Applications > Local storage to verify if the data is still there or not:

All of the above steps can be done with the sessionStorage Object but remember it will delete all the data when the session expires. Let’s see the demonstration.

How to create/add data in sessionStorage using setItem() method

We are going to first create a new entry in the sessionStorage with the following line of code:

sessionStorage.setItem("Job","Auditor");

The console displays “undefined” meaning the command was successfully executed without any error:

We can verify the storage under the session storage tab:

Close the browsers, and reopen the same link and then go to developer’s tools > Applications > sessions storage, you will see the following results:

You can see that the entry was deleted, this proves that the sessionStorage object only stores data for in the local storage of the browser for only one session.

Conclusion

The localStorage and sessionStorage objects are used to store data in the browser’s local storage and they are part of the Web Storage API; Both of these objects provide 5 functions to the user that allows the users to create, update, get and delete an entry from the local storage. The difference between the localStorage and sessionStorage object is that the localStorage object permanently stores the data against a website while the sessionStroage object only stores the data for one session.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.