Web Storage API

Ranjul Arumadi
Last Updated: May 13, 2022

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); 

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); 

 

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>

 

 

Output

 

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");

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>

 

Output

 

Browser Support

Browser Name

Has support

Chrome Yes
EdgeYes
FirefoxYes
SafariYes
OperaYes

Storage Object Properties and Methods

Property/MethodDescription
key(n)It returns the name of the nth key present in the storage.
lengthIt 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.

Was this article helpful ?
1 upvote

Comments

No comments yet

Be the first to share what you think