Table of contents
1.
Introduction
2.
The localStorage object
2.1.
The setItem() Method
2.2.
The getItem() Method
3.
The sessionStorage object
3.1.
The setItem() Method
3.2.
The getItem() Method
4.
Browser Support
5.
Storage Object Properties and Methods
6.
Frequently Asked Questions
7.
Key Takeaways
Last Updated: Mar 27, 2024

Web Storage API

Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Web Storage API is one of the popular JavaScript(JS) APIs. It is used for storing and retrieving data in the browser. It gives a mechanism by which browsers can store key/value pairs much better than using cookies. It is also very easy to use.

The localStorage object

The localStorage object, part of the web storage API, gives us access to the local storage for a particular Web Site. It allows you to store, read, add, modify, and delete data items for that domain. The data does not have an expiry date and will not get deleted when the browser is closed. 

 

This functionality is compatible even when the websites are browsed in 'incognito' or 'private' mode. However, the data is kept only until you quit the browser. 

The setItem() Method

The localStorage.setItem() method is used to store a data item in storage. If it already exists, then an update over the value of the existing key takes place.

 

Syntax:

// Parameters are the keys name and its value
localStorage.setItem(keysName, keysValue); 
You can also try this code with Online Javascript Compiler
Run Code

The getItem() Method

When the localStorage.getItem() method is passed a key name, it will return its corresponding value. If the value of a non-existing key is requested, then it returns null.

 

Syntax:

// Value of key stored to variable storedValue
var storedValue = localStorage.getItem(keysName); 
You can also try this code with Online Javascript Compiler
Run Code

 

Let's understand the methods of the localStorage object with the help of an example.

 

Code:

<!DOCTYPE html>
<html>
<body>
<p id="test"></p>
<script>
localStorage.setItem("Name","Ninja");
document.getElementById("test").innerHTML = localStorage.getItem("Name");
</script>
</body>
</html>
You can also try this code with Online Javascript Compiler
Run Code

 

 

Output

Try and compile by yourself with the help of online javascript compiler for better understanding.

The sessionStorage object

The sessionStorage object of the web storage API(Application Programming Interface) is similar to the localStorage object that we have discussed above. The difference lies in the name, sessionStorage stores data for a session. Unlike localStorage, where data is retained even upon closing of the browser, here the data is deleted when the browser is closed.

The setItem() Method

The sessionStorage.setItem() method is used to store a data item in storage.

 

Syntax:

sessionStorage.setItem("Name", "NInja");
You can also try this code with Online Javascript Compiler
Run Code

The getItem() Method

The sessionStorage.getItem() method is used to retrieve a data item from the storage.

 

Let's understand the methods of the sessionStorage object with the help of an example.

 

Code:

<!DOCTYPE html>
<html>
<body>
<p id="test"></p>
<script>
sessionStorage.setItem("Name","Ninja");
document.getElementById("test").innerHTML = sessionStorage.getItem("Name");
</script>
</body>
</html>
You can also try this code with Online Javascript Compiler
Run Code

 

Output

 

Browser Support

Browser Name

Has support

Chrome  Yes
Edge Yes
Firefox Yes
Safari Yes
Opera Yes

Storage Object Properties and Methods

Property/Method Description
key(n) It returns the name of the nth key present in the storage.
length It returns the number of data items that are stored in the Storage object.
getItem(KeysName) It returns the value of the key name that is specified.
setItem(keysName, value) It adds that key to the storage or updates that key's value if it already exists.
removeItem(keysName) It removes the specified key from the storage.
clear() It empties all keys out of the storage.

Frequently Asked Questions

  1. What are the two objects that come under the web storage API?

The two objects coming under the web storage API are localStorage and sessionStorage.

 

2. What are the uses of web storage API?

Some of the web storage API uses include storing intermediate data and sending requests in poor connectivity areas. It can be used to store data that has to be used across tabs, storing user's cart items information, reminders, etc.

 

3. What is the advantage of using web storage over cookies?

Web storage has many advantages over cookies. Some of the advantages are-

  • it is more secure than cookies
  • the data stored using web storage don't expire but cookies do
  • it is faster as it does not send data to server-side
  • it can store about 5MB per domain compared to cookies having a maximum size of 4096 bytes.

Key Takeaways

Web Storage API is one of the popular JS API. As discussed in the blog, It is used for storing and retrieving data in the browser. It gives a mechanism by which browsers can store key/value pairs much better than using cookies. We have covered various methods like getItem(), setItem(), which are used to get and store values to the web storage API.

 

If you enjoyed reading this article about the Web Storage API in Js, check out 7 tips to improve your JavaScript skills and 5 useful JavaScript tips and tricks.

Live masterclass