Skip to main content

Web Storage API

The Web Storage API is a built-in feature of modern web browsers that allows web developers to store key-value pairs locally within the user's web browser.

This provides a way for web applications to persist data across user sessions and page reloads without the need for server-side storage.

The Web Storage API provides two mechanisms for storing data: localStorage and sessionStorage.

The localStorage Object​

The localStorage object provides a simple and easy-to-use interface for interacting with the local storage mechanism.

The data stored in localStorage is persistent and will not be deleted when the browser window is closed. It will be available the next time the user opens the web page.

Let's take a look at the methods provided by the localStorage object for storing and retrieving data.

The setItem() Method​

The setItem() method is a built-in method of the localStorage object that is used to store a key-value pair in the local storage of a web browser. It takes two arguments: the key and the value.

Here's an example of using the setItem() method to store a key-value pair in local storage:

localStorage.setItem('myKey', 'myValue');

In this example:

  • This code stores the string 'myValue' in local storage under the key 'myKey'.

You can also store objects and arrays in local storage by first converting them to a string using the JSON.stringify() method.

As an example:

var myObject = { name: 'John', age: 30 };
localStorage.setItem('myKey', JSON.stringify(myObject));

In this example:

  • This code stores the object { name: 'John', age: 30 } in local storage under the key 'myKey', after converting it to a JSON string.
caution

The setItem() method will throw an exception if the maximum storage limit for local storage has been reached in the browser. This limit is typically around 5-10 MB, depending on the browser

The getItem() Method​

The getItem() method is a built-in method of the localStorage object that is used to retrieve the value associated with a specific key from the local storage of a web browser. It takes one argument: the key of the item you want to retrieve.

Here's an example of using the getItem() method to retrieve a value from local storage:

var myValue = localStorage.getItem('myKey');

You can retrieve it by first retrieving the JSON string and then parsing it back into an object or array using the JSON.parse() method.

As an example:

var myObjectString = localStorage.getItem('myKey');
var myObject = JSON.parse(myObjectString);

In this example:

  • This code retrieves the JSON string associated with the key 'myKey' from local storage, assigns it to the variable myObjectString, and then parses it back into an object using the JSON.parse() method, which assigns it to the variable myObject.

The removeItem() Method​

The removeItem() method is a built-in method of the localStorage object that is used to remove a key-value pair from the local storage of a web browser. It takes one argument: the key of the item you want to remove.

As an example:

localStorage.removeItem('myKey');

In this example:

  • This code removes the key-value pair associated with the key 'myKey' from local storage.
caution

If you try to remove a key that does not exist in local storage, the removeItem() method will not throw an error, and the method will simply do nothing.

The clear() Method​

The clear() method is used to remove all key-value pairs from the local storage of a web browser. It does not take any arguments.

As an example:

localStorage.clear();

In this example:

  • This code removes all key-value pairs stored in local storage.
danger

Once you use the clear() method, all the data stored in local storage will be permanently deleted and cannot be recovered, so be careful when using this method.

The sessionStorage Object​

The sessionStorage object is similar to the localStorage object, but the key-value pairs it stores are only available for the duration of the current session. A session starts when the user opens a web page and ends when the user closes the page.

The sessionStorage object provides a simple and easy-to-use interface for interacting with the session storage mechanism.

Let's take a look at the methods provided by the sessionStorage object for storing and retrieving data.

The setItem() Method​

The setItem() method is a built-in method of the sessionStorage object that is used to add a new key-value pair or update an existing one in the current session's storage. It takes two arguments: the key of the item and the value to be stored.

As an example:

// Store a value in sessionStorage
sessionStorage.setItem('myKey', 'myValue');

In this example:

  • This code stores the value 'myValue' under the key 'myKey' in sessionStorage.

It's important to note that the value passed to the setItem() method must be a string. If you pass an object or an array, you should use the JSON.stringify() method to convert it to a string before storing it in sessionStorage.

As an example:

var myObj = {name: 'John', age: 30};

// Convert the object to a string and store it in sessionStorage
sessionStorage.setItem('myKey', JSON.stringify(myObj));

In this example:

  • This code stores the object myObj under the key 'myKey' in sessionStorage. The JSON.stringify() method is used to convert the object to a string before storing it in sessionStorage.

When retrieving the object from sessionStorage, you can use the JSON.parse() method to convert the string back to an object:

 // Retrieve the object from sessionStorage and parse it
var myObj = JSON.parse(sessionStorage.getItem('myKey'));

The getItem() Method​

The getItem() method is a built-in method of the sessionStorage object that is used to retrieve the value associated with a specific key from the current session's storage. It takes one argument: the key of the item.

As an example:

var myValue = sessionStorage.getItem('myKey');

In this example:

  • This code retrieves the value associated with the key 'myKey' from sessionStorage and assigns it to the variable myValue.

If you have used JSON.stringify() for storing your array or object then retrieve it using JSON.parse() Method.

As an example:

 // Retrieve the object from sessionStorage and parse it
var myObj = JSON.parse(sessionStorage.getItem('myKey'));
note

The sessionStorage object also supports the removeItem() and clear() methods, which work in the same way as they do with localStorage.