How to save arrays and objects to localStorage using JavaScript?
Tags: javascript
Published: 2020-12-04 00:00:00

---
  title: How to save arrays and objects to localStorage using JavaScript?
  published: true
  tags: JavaScript
  date: Fri Dec 04 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/save-arrays-objects-to-localstorage-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-1197e0991580cf91dbe01c8be1627d8f.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/save-arrays-objects-to-localstorage-javascript)
  
The [`localStorage`](https://melvingeorge.me/blog/store-persist-data-javascript) API in browsers only supports adding information in a `key:pair` format and the `key` and the `pair` should be of type `string` thus native objects or arrays cannot be stored in the `localStorage`.

**To save arrays or objects using the `localStorage` API in JavaScript, we need to first `stringify` the arrays or objects using the `JSON.stringify()` method, and when we need to retrieve the value we can use the `JSON.parse()` method.**

Consider this object,

```js
// an object
const John = {
  name: "John Doe",
  age: 23,
};
```

To save this object to the `localStorage` First, we need to convert the `John` object into a JSON string. For that let's use the `JSON.stringify()` method and pass the object as an argument to the method.

It can be done like this,

```js
// an object
const John = {
  name: "John Doe",
  age: 23,
};

// convert object to JSON string
// using JSON.stringify()
const jsonObj = JSON.stringify(John);
```

Now let's use the `setItem()` method on the `localStorage` and pass the key name as the first argument to the method and the `jsonObj` as the second argument to the method like this,

```js
// an object
const John = {
  name: "John Doe",
  age: 23,
};

// convert object to JSON string
// using JSON.stringify()
const jsonObj = JSON.stringify(John);

// save to localStorage
localStorage.setItem("John", jsonObj);
```

Now to retrieve the value from the `localStorage`, we can use the `getItem()` method on the `localStorage` API and then convert the string to a valid object using the `JSON.parse()` method.

It can be done like this,

```js
// an object
const John = {
  name: "John Doe",
  age: 23,
};

// convert object to JSON string
// using JSON.stringify()
const jsonObj = JSON.stringify(John);

// save to localStorage
localStorage.setItem("John", jsonObj);

// get the string
// from localStorage
const str = localStorage.getItem("John");

// convert string to valid object
const parsedObj = JSON.parse(str);

console.log(parsedObj);
```

Great! 🌟 We have successfully stored and retrieved from the `localStorage` API.

See this example live in [JSBin](https://jsbin.com/cusurupayo/2/edit?js,console).

The process is the same for arrays too.

See this example using arrays,

```js
// an array
const arr = [1, 2, 3, 4, 5];

// convert array to JSON string
// using JSON.stringify()
const jsonArr = JSON.stringify(arr);

// save to localStorage
localStorage.setItem("array", jsonArr);

// get the string
// from localStorage
const str = localStorage.getItem("array");

// convert string to valid object
const parsedArr = JSON.parse(str);

console.log(parsedArr);
```

See this example live in [JSBin](https://jsbin.com/wohaxopaku/2/edit?js,console).

### Feel free to share if you found this useful 😃.

---