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 neveropen" ] 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;"> neveropen </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
