What is Local Storage in JavaScript and How can you Use it?

Web Storage or DOM Storage is a standard Javascript API provided by browsers that allow users to access arbitrary data in the memory of an existing web page before it is unloaded by the browser. The API offers two mechanisms for storing data: Session Storage and Local Storage.

Web storage serves as a storage container that enables applications to store data on behalf of other clients. It is used to save and retrieve information such as session and persistent identifiers, text, images, and files in HTML5 Canvas/WebGL access (see also WebGL), form data, typed URLs, and passwords.

What is Local Storage?

LocalStorage is a form of web storage provided by the browser that allows web applications to store data locally within a user’s browser with no expiration date. The terms local storage and session storage are different and refer to different web storage types. Other websites can use the data in Local Storage to remember or maintain state across multiple open browser tabs/windows.

Note – The data saved in LocalStorage is not preserved if you revisit this site with a different browser or use another device.

Also read, What is a Callback Functions in JavaScript

Why Local Storage is important?

There are many use cases of web storage/local storage, some are mentioned below:-

Caching

Users can store important data like login credentials on the browser so that he doesn’t have to authenticate whenever they open the applications.

Database

Local storage can also be used as a database where users can store important little basic data and also can retrieve it even when the internet connection is not available.

Also read, What is JavaScript Event Loop?

How to use/implement local Storage

You use the following methods to manage your data in local storage:-

setItem( )

This method is used to store the given data in local storage. It accepts two parameters, a key and a value pair to store the data.

Example

To store a single value of data in local storage:-

// Here, `authenticate` is the key and `true` is the value
localStorage.setItem("authenticate", "true");

Example

To store multiple values of data in local storage, we have to store it as an object/array and then you need to convert them to strings using the JSON.stringify() method:-

//Storing objects in LocalStorage
const user = {
  name: "Aaquib",
  age: 27,
};

localStorage.setItem("user-data", JSON.stringify(user));

//Storing arrays/lists in LocalStorage
const names = ["John", "Aaquib", "Farhana"];
localStorage.setItem("names", JSON.stringify(names));

Also read, ChatGPT: How to get started and start asking queries

getItem()

This method is used to retrieve the data stored in the local storage. This method accepts a single parameter, a key which is was used to save that particular data.

Example

If you want to retrieve the user data which you stored in the above code, then you can use the following statements,

let userData = localStorage.getItem("user-data");
console.log(userData)

// "{name:"Aaquib", age:"27"}"

The above code will return an object but in string type, if you want to convert the returned string into an object then you need to use JSON.parse() the method.

let userData = JSON.parse(localStorage.getItem("user-data")); 
console.log(userData) 

// {name:"Aaquib", age:"27"}

removeItem()

This method is used to remove the data from the local storage. This method accepts a single parameter, a key which is was used to save that particular data.

Example

If you want to remove the user data which you stored in the above code, then you can use the following statements,

localStorage.removeItem("user-data");

key()

Use key method to retrieve data from LocalStorage. The key represents the nth data you want to retrieve. As long as you pass a valid key and the function will return the item to LocalStorage.

Example

localStorage.key(1);

clear()

If you wish to clear out all the data from the browser’s local storage you can use this method.

Note – Once the data is cleared it cannot be retrieved by any means!

Example

localStorage.clear()

Methods	Functions
setItem()	is used to store data in the local storage
getItem()	is used to retrieve data from the local storge
removeItem()	is used to remove data from the local storage
key()	is used to retrieve data from the local storage at a specified index
clear()	is used to remove all the data from the local storage

Also read, How JavaScript works with HTML you might not know

How to Access Local Storage in the Browser

If you want to visually see your data which is stored in your local storage, then you can follow the following ways:-

• First, you need to open the browser console by pressing F12 or right-click on the mouse and then click on ‘Inspect Element’.

• Next, click on the Application tab in the browser’s console, In the left-down menu, you will find Local storage under the Storage option.
• Click on the Local storage, you would able to see all the data stored in the browser’s local storage.

Also read, 10 Must Know JavaScript DOM Methods

Final Words

LocalStorage is a form of web storage provided by the browser that allows web applications to store data locally within a user’s browser with no expiration date. This makes it easy for users to work offline and also provides an effective way to pass data between pages or even across domains. LocalStorage is well-suited for small amounts of personal information, such as preferences, login credentials, and bookmarks for temporary storage when the user is accessing content from a mobile browser.

I hope you like my article, if you did please share more with your friends, colleagues, and family. Also do check out the amazing articles on various topics like React, DSA, Javascript, and Java.