Skip to main content

How to Store Arrays and Objects in localStorage in JavaScript

The Web Storage API's localStorage is an incredibly useful tool for persisting data in a user's browser. However, it has one major limitation: it can only store strings. If you need to store structured data like an array or an object, you must first convert it into a string format. The standard and most reliable way to do this is with JSON.

This guide will teach you the essential two-step process for storing and retrieving any complex data structure in localStorage using JSON.stringify() and JSON.parse().

The Core Problem: localStorage Only Stores Strings​

If you try to store an object or array directly, localStorage will implicitly convert it to a string, which often results in a useless and unrecoverable value.

The problem:

// Problem: This does not work as expected.
const user = { id: 1, name: 'Alice' };

localStorage.setItem('user', user);

const retrieved = localStorage.getItem('user');

console.log(retrieved); // Output: "[object Object]"
// The original object is lost!
note

The same issue occurs with arrays, which get converted to a comma-separated string without the necessary structure.

The Solution: JSON.stringify() and JSON.parse()​

The correct way to handle this is to use the built-in JSON object to serialize and deserialize your data.

  • JSON.stringify(value): This method takes a JavaScript object or array and converts it into a JSON string. This string representation can be safely stored in localStorage.
  • JSON.parse(string): This method takes a JSON string and converts it back into a corresponding JavaScript object or array.

This two-step "stringify and parse" process is the fundamental pattern for working with complex data in localStorage.

Storing and Retrieving an Array​

This example demonstrates the complete lifecycle of storing and retrieving a simple array.

Solution:

const favoriteFruits = ['apple', 'banana', 'cherry'];

// 1. Convert the array to a JSON string.
const jsonString = JSON.stringify(favoriteFruits);
console.log(jsonString);                    // Output: '["apple","banana","cherry"]'

// 2. Store the JSON string in localStorage.
localStorage.setItem('my-fruits', jsonString);

// --- Later, on another page or visit ---

// 3. Retrieve the JSON string from localStorage.
const retrievedString = localStorage.getItem('my-fruits');

// 4. Parse the JSON string back into a JavaScript array.
const retrievedArray = JSON.parse(retrievedString);

console.log(retrievedArray);                // Output: ['apple', 'banana', 'cherry']
console.log(Array.isArray(retrievedArray)); // Output: true
note

The retrievedArray is a true JavaScript array that you can iterate over or use array methods on.

Storing and Retrieving an Object​

The exact same process applies to JavaScript objects.

Solution:

const userProfile = {
  id: 101,
  username: 'Alice',
  theme: 'dark'
};

// 1. Stringify and store the object.
localStorage.setItem('user-profile', JSON.stringify(userProfile));

// --- Later, retrieve and parse the object ---
const retrievedObject = JSON.parse(localStorage.getItem('user-profile'));

console.log(retrievedObject);           // Output: { id: 101, username: 'Alice', theme: 'dark' }
console.log(retrievedObject.username);  // Output: 'Alice'

Storing and Retrieving an Array of Objects​

This pattern scales perfectly to more complex data structures, like an array of objects.

const userList = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

// 1. Stringify and store the array of objects.
localStorage.setItem('user-list', JSON.stringify(userList));

// --- Later, retrieve and parse the data ---
const retrievedList = JSON.parse(localStorage.getItem('user-list'));

console.log(retrievedList[1].name); // Output: 'Bob'
note

The retrieved data is a fully functional array of objects that you can map, filter, or forEach over.

Conclusion​

While localStorage can only handle strings, this limitation is easily overcome by using the built-in JSON utility methods.

  • To store an array or object, always convert it to a string first with JSON.stringify().
  • To retrieve an array or object, get the string from localStorage and parse it back into a usable JavaScript object with JSON.parse().

This simple, two-step pattern is the definitive and most reliable method for persisting complex data in the browser.

Table of Contents