Using Web Storage in HTML and JavaScript: Storing Data Locally in the Browser

Have you ever used a website and noticed that the actions you did previously were saved on the website even though you have not logged in? Have you ever wondered how that works? Fear not. We will discuss this today in this blog in the fundamental level.

The latest version of HTML is HTML 5 which comes with HTML 5 Web API that lets you store data permanently or just for the session. The API provides a way to store data locally in your device using JavaScript.

This allows you to store and manipulate the data using JavaScript without need for the server side storage. The API comes with two types of storage mechanism:

1. Local storage
2. Session storage

1. Local Storage

It is a type of storage mechanism in browser where the data will be stored with no expiration. The data will persist even after the tab or the browser is closed and reopened. The data is accessible across the different browser windows or tabs under the same origin (same protocol, domain and port).

To store and manipulate the data in local storage, JavaScript provides us with localStorage object which allows you to do so.

// Storing data in local storage
localStorage.setItem('username', 'John');

// Retrieving data from local storage
const username = localStorage.getItem('username');

2. Session Storage

It is similar to the local storage but is a type of storage mechanism in browser where the data will be stored with expiration. The data will not persist after the tab or the browser is closed and reopened.

Data stored in this storage is only accessible for the duration of the browser session. The data is accessible across the different browser windows or tabs under the same origin (same protocol, domain and port).

To store and manipulate the data in session storage, JavaScript provides us with sessionStorage object, which allows you to do so.

// Storing data in session storage
sessionStorage.setItem('language', 'JavaScript');

// Retrieving data from session storage
const language = sessionStorage.getItem('language');

Both the storage are useful depending on your website requirements. It makes the user experience and interface more comfortable and helpful based on the record of the previous user actions.

It can be useful in e-commerce websites to store the items in the cart selected by the user. Not only that, but it can also be used for user authentication purposes.

Method of Storage Objects

Both the objects works similar and have a lot of similar methods that serve the purpose of the manipulation of the data of the storage. Let’s discuss few useful methods of the storage objects:

1. Setting new item

setItem(key, value): Stores a key-value pair in the storage.

// setting new key-value pair
sessionStorage.setItem('language', 'JavaScript');

2. Getting value of the item

getItem(key): Retrieves the value associated with the specified key.

// getting value from pair using key
sessionStorage.getItem('language');

3. Removing the item from storage

removeItem(key): Removes the key-value pair associated with the specified key.

// removing key and value pair using key
sessionStorage.removeItem('language');

4. Clearing all the items

clear(): Clears all data stored in the storage.

// clearing all the items of the storage
sessionStorage.clear();

These methods help to manipulate the data inside the storage objects using HTML5 Storage API and JavaScript. Hope you learned something new and useful.