Store and Get JavaScript Arrays in localStorage [Many Ways]

You can store a JavaScript array in localStorage to keep multiple items together. When you save them as an array instead of saving each item separately, you can easily get them from the localStorage.

The localStorage only allows strings as a key/value pair. To store an array it is important to convert the array into a string using JSON.stringify() method in JavaScript. The JSON.parse() method can convert it to an array after getting it from the storage.

Let's see how to use these JSON methods to save an array in the localStorage using JavaScript.

How to Store a JavaScript Array in localStorage

There are 2 steps for storing a JavaScript array in localStorage:

• Step 1: Convert the array into a string.
• Step 2: Save the string in the localStorage.

In the first step, you have to stringify the array using the JSON.stringify() method. You just need to pass the array as its argument.

          const languages = ['JavaScript', 'Python', 'Golang', 'PHP', 'Rust'];

const arrayString = JSON.stringify(languages);
        

When you call this method with the languages array, it will return the string version of it. Now we can easily store it in the localStorage.

In the Second step, I will save the converted string using the setItem() method. As you know, localStorage keeps the data as a key/value pair. Therefore, you need to define the key for your array.

          const languages = ['JavaScript', 'Python', 'Golang', 'PHP', 'Rust'];

const arrayString = JSON.stringify(languages);

localStorage.setItem('languages', arrayString);
        

I am using languages as the key to store arrayString in the localStorage. I will use this key to get the value from the localStorage.

In this example, the array contains only strings. But if you need, you can use objects in the array.

Also Read: How to Save Images To LocalStorage in JavaScript & Load Them

Save an Array of Objects in localStorage

If you have an array of objects, you can store them in localStorage using JavaScript. You can use those 2 steps shown in the previous section.

          const languages = [
    {
        name: 'JavaScript',
        year: 1995,
    },
    {
        name: 'Python',
        year: 1991,
    },
    {
        name: 'Golang',
        year: 2009,
    },
    {
        name: 'PHP',
        year: 1995,
    },
    {
        name: 'Rust',
        year: 2010,
    },
];

const arrayString = JSON.stringify(languages);

localStorage.setItem('languages', arrayString);
        

I have an array that contains objects as its values. To store it in the localStorage, you have to stringify the array using JSON.stringify() method.

Then save the string using the setItem() method. It is the same as storing an array of strings.

You can deep copy a JavaScript object with this process as well.

Also Read: Best Ways to Check If a Variable is an Array in JavaScript

Getting a JavaScript Array From localStorage

JavaScript has the getItem() method to retrieve data from the localStorage. This method takes one argument (key) and returns the value.

When you call this method, you get the value as a string. To make it an array, you have to pass the value in the JSON.parse() method.

          const arrayString = localStorage.getItem('languages');

const languages = JSON.parse(arrayString);

console.log(languages);
// ["JavaScript","Python","Golang","PHP","Rust"]
        

Here I am calling the getItem() method with the languages key. Because I used this key to store the array.

Then I will pass the value to the JSON.parse() method to convert the string to a JavaScript array. If you have an array of objects in your localStorage, you will follow the same process.

After getting the value, you can loop through the array in JavaScript and use the items.

Limitations of This Process

There are a few limitations that you should consider while using this process. The localStorage has a limited storage capacity. You can store between 2MB to 10MB of data.

Data from localStorage can be removed. You can't consider it as permanent storage. If a user deletes the information manually, you will lose them permanently.

Conclusion

We use an array in JavaScript to keep many items together. So it is very helpful to save them in the localStorage for later use.

You can do it by following 2 easy steps. Whenever your application needs the data, you can access those and display them on the webpage.

It is a great option for temporary storage. That is why I have shown you how to store an array or array of objects in localStorage using JavaScript in this article.