# Storing and retrieving objects in local storage using JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Dec 5, 2020. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-local-storage-store-retrieve-objects

> A quick guide to learn how to store and retrieve objects in HTML web storage by using JavaScript.

The [HTML web storage API](https://attacomsian.com/blog/web-storage-api-local-storage-session-storage#storing-data) offers a way to store a large amount of data (5MB+) in a user's browser without affecting the website performance. 

By default, both web storage objects — `localStorage` and `sessionStorage` — allows us to store only string key-value pairs:

```javascript
const user = { name: 'Alex', job: 'Software Engineer' };

localStorage.setItem('user', user);

console.log(localStorage.getItem('user')); // [object Object]
```

If you want to store an entire JavaScript object, you first need to [serialize](https://attacomsian.com/blog/json-parse-stringify#jsonstringify) it into a string by using the `JSON.stringify()` method:

```javascript
const user = { name: 'Alex', job: 'Software Engineer' };

localStorage.setItem('user', JSON.stringify(user));

console.log(localStorage.getItem('user')); 
// {"name":"Alex","job":"Software Engineer"}
```

To retrieve the JavaScript object from `localStorage`, use the `getItem()` method. You still need to use the `JSON.parse()` method to parse the JSON string back to an object:

```javascript
// Retrieve the JSON string
const userStr = localStorage.getItem('user');

// Parse JSON string to object
const userObj = JSON.parse(userStr);

// Print object attributes
console.log(userObj.name);  // Alex
console.log(userObj.job);    // Software Engineer
```

To learn more about `localStorage` and `sessionStorage` objects, take a look at [this article](https://attacomsian.com/blog/web-storage-api-local-storage-session-storage).