How to store an array in localStorage ?

Last Updated : 17 Feb, 2023

In this article, we are going to take a look at how we can store an array in localStorage in javascript.

Javascript localStorage is provided by a browser and is very lightweight storage where data can be stored in key-value pairs. The key must be unique and the values are in the UTF-16 DOM String format. Hence, we can’t directly store an array in localStorage as it allows only strings to be stored.

Approach: To store an array in localStorage, 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>