HTML web Storage API


Published on: July 03, 2021 By T.Andrew Rayan

Browsers allow the web application to store data locally inside it using the web storage api's.

Web Storage allows us to store huge volume of data locally. All the pages in the web application from the same origin can store and access the data locally.

Web storage provides us with two api's to store the data on the browser.

1) LocalStorage

2) SessionStorage

LocalStorage:

The localStorage object allows us to store data with no expiration time. The data will be persistent even when the browser is closed.

The localStorage provides us with two functions to get and set the data to the local storage.

The setItem function is used to save the data to the local storage. It has two parameters, the first parameter is the key and the second parameter is the data.

The getItem function is used to get the data from the local storage using the key provided to save the data using setItem.

Example

In order to remove the data from the localStorage, we can use the removeItem function.

Example

SessionStorage:

Unlike localStorage, sessionStorage is used to store the data to the browser. The only difference is that, the data will be available only for that session. If we close the browser tab, then the data will be removed.

To store the data in the sessionStorage we can use object notation to save the data.

Example


Most Read