Saving Arrays and Objects to Browser Storage Using JavaScript

Valerie M.

The Problem

You’d like to save arrays and objects to browser storage using JavaScript as an alternative to using cookies. Is there a way to do this?

The Solution

There are a couple of ways to save arrays and objects to browser storage.

The Web Storage API allows us to store items in a more intuitive way using two mechanisms: localStorage and sessionStorage.

For both of these mechanisms:

  • Items are converted to a JSON string using JSON.stringify().
  • Items are stored in key-value pairs.
  • When items are retrieved from storage, the JSON string is parsed using JSON.parse().
  • When items have been removed from storage, the storage can be cleared.

Let’s look at some code examples.

The localStorage API

The localStorage API maintains browser storage even when the browser is closed and reopened.

The code example below shows how the localStorage API is used to store arrays:

const myArray = ['a', 'b', 'c', 'd']; // convert array to JSON string using JSON.stringify() const jsonArray = JSON.stringify(myArray); // save to localStorage using "array" as the key and jsonArray as the value localStorage.setItem('array', jsonArray); // get the JSON string from localStorage const str = localStorage.getItem('array'); // convert JSON string to relevant object const parsedArray = JSON.parse(str); console.log(parsedArray);

To save objects, replace myArray with something like myObject. We’ll use the sessionStorage API to demonstrate saving objects for brevity.

The sessionStorage API

The sessionStorage API stores items for as long as the browser window is open, including page reloads and restores. The data is lost once the browser window is closed.

Here’s a code example to show how to use the sessionStorage API to store objects:

const Person = { name: 'John Smith', age: 18, }; // convert object to JSON string using JSON.stringify() const jsonObject = JSON.stringify(Person); // save to localStorage sessionStorage.setItem('person', jsonObject); // get the JSON string from sessionStorage const str = sessionStorage.getItem('person'); // convert JSON string to valid object const parsedObject = JSON.parse(str); console.log(parsedObject);

To remove items from local and session storage, use the removeItem() method, giving it the key, as follows:

localStorage.removeItem('array'); sessionStorage.removeItem('person');

The local and session storage can also be cleared using clear():

localStorage.clear(); sessionStorage.clear();

Get Started With Sentry

Get actionable, code-level insights to resolve JavaScript performance bottlenecks and errors.

  1. Create a free Sentry account

  2. Create a JavaScript project and note your DSN

  3. Grab the Sentry JavaScript SDK

<script src="https://browser.sentry-cdn.com/7.109.0/bundle.min.js"></script>
  1. Configure your DSN
Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.