How to store an array in localStorage ?
Last Updated :
13 Sep, 2024
To store an array in localStorage refers to saving an array of data in the web browser’s storage that persists across sessions. This is useful for keeping data, like user preferences or temporary information, accessible even after refreshing the page or reopening the browser.
What is Javascript localStorage?
JavaScript localStorage is a web storage API that allows you to store key-value pairs in the browser with no expiration time. Data saved in localStorage persists across page reloads, browser sessions, and restarts, making it useful for persistent data storage.
Approach: To store an array in local storage, you can follow the below-mentioned steps:
Convert the array into a string using JSON.stringify() method.
let string = JSON.string(array)
Store the converted string in the localStorage.
localStorage.setItem("key", string)
Now to retrieve the array, you can access the string value from the localStorage and use the JSON.parse() method to parse the string and convert it back to the array.
// Retrieving the string
let retString = localStorage.getItem("key")
// Retrieved array
let retArray = JSON.parse(retString)
Example 1: We have an array which is having the name of students. We store the array using the above method and then parse it and display it in the console.
Storing the array:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to store an array in localStorage ?
</title>
</head>
<body>
<script>
let students = ["Vikas", "Utsav", "Pranjal",
"Aditya", "Arya"]
let string = JSON.stringify(students)
localStorage.setItem("students", string)
</script>
</body>
</html>
Now, to see the stored string, open the “Application” tab in inspect section and go to “localStorage“.

Storing the students array in localStorage
Retrieving the array: To retrieve the stored array, we use the following code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to store an array in localStorage?
</title>
</head>
<body>
<script>
let retString = localStorage.getItem("students")
let retArray = JSON.parse(retString)
console.log(retArray);
</script>
</body>
</html>
Output on the console:

Retrieving the students array from localStorageÂ
Example 2: In this example, we have stored an array “todos” in localStorage and then later on we have retrieved the array and using a for loop iterated over the array and displayed the array in the HTML code.
Storing the array
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to store an array in localStorage?
</title>
</head>
<body>
<script>
let todos = [
"Go to gym",
"Studying for 2 hours",
"Chilling out with friends",
"Checking out GeeksforGeeks"
]
localStorage.setItem("todos", JSON.stringify(todos))
</script>
</body>
</html>
Stored Output:

Storing the todo list array in the localStorage
Retrieving the “todos” and displaying them on the webpage
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to store an array in localStorage?
</title>
</head>
<body style="font-family: sans-serif;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>My todos are:</h3>
<ul class="todos"></ul>
<script>
let todos = JSON.parse(localStorage.getItem("todos"))
let todoList = document.querySelector(".todos")
todos.forEach(todo => {
let li = document.createElement("li")
li.innerText = todo
todoList.appendChild(li)
});
</script>
</body>
</html>
Output:

Retrieving the todo list array and displaying it on the webpage
Similar Reads
How to Store Data in Local Storage using AngularJS ?
Angular JS is a typescript-based web application framework. It is supported by the Angular team of Google and open-source developers. It is a component-based framework allowing the developers to reuse the components created. It is well-suited for large and complex applications because of its well-de
5 min read
How To Render An Array Of Objects In ReactJS?
Rendering dynamic data in ReactJS is one of the most fundamental tasks when building interactive web applications. One of the most common scenarios is rendering an array of objects, such as a list of users, products, or posts, in the user interface (UI). To render an array of objects in React we wil
4 min read
How to store a key=> value array in JavaScript ?
In JavaScript, storing a key-value array means creating an object where each key is associated with a specific value. This allows you to store and retrieve data using named keys instead of numeric indices, enabling more intuitive access to the stored information. Here are some common approaches: Tab
4 min read
How to Store an Object Inside an Array in JavaScript ?
Storing an object inside an array in JavScript involves placing the object as an element within the array. The array becomes a collection of objects, allowing for convenient organization and manipulation of multiple data structures in a single container. Following are the approaches through which it
3 min read
Swift - How to Store Values in Arrays?
An array is a collection of elements having a similar data type. Normally to store a value of a particular data type we use variables. Now suppose we want to store marks of 5 students of a class. We can create 5 variables and assign marks to each of them. But for a class having 50 or more students,
4 min read
How to get the size of an array in JavaScript ?
To get the size (or length) of an array in JavaScript, we can use array.length property. The size of array refers to the number of elements present in that array. Syntax const a = [ 10, 20, 30, 40, 50 ] let s = a.length; // s => 5 The JavaScript Array Length returns an unsigned integer value that
2 min read
How to Save Data in Session and Local Storage [Full Guide]
When working with web applications, session storage and local storage are essential tools for storing data on the client side. These storage mechanisms allow you to persist user data between page reloads or sessions, helping improve user experience and performance. Session storage is useful for temp
10 min read
How to Push an Array into Object in JavaScript?
To push an array into the Object in JavaScript, we will be using the JavaScript Array push() method. First, ensure that the object contains a property to hold the array data. Then use the push function to add the new array in the object. Understanding the push() MethodThe array push() method adds on
2 min read
How to view array of a structure in JavaScript ?
The Javascript arrays are heterogeneous. The structure of the array is the same which is enclosed between two square brackets [ ], and the string should be enclosed between either "double quotes" or 'single quotes'. You can get the structure of by using JSON.stringify() or not, here you will see the
2 min read
How to initialize an array in JavaScript ?
Initializing an array in JavaScript involves creating a variable and assigning it an array literal. The array items are enclosed in square bracket with comma-separated elements. These elements can be of any data type and can be omitted for an empty array. Initialize an Array using Array LiteralIniti
3 min read