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>