How to store and persist data in JavaScript?
Tags: javascript
Published: 2020-07-04 00:00:00

---
  title: How to store and persist data in JavaScript?
  published: true
  tags: JavaScript
  date: Sat Jul 04 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/store-persist-data-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-f74f25091e6008742c5ac03d4277b31b.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/store-persist-data-javascript)
  
![sweets stored in a jar](https://melvingeorge.me/_next/static/images/main-f74f25091e6008742c5ac03d4277b31b.jpg)

<p class="text-center">
  Photo by
  <a href="https://unsplash.com/photos/19pdhEmwkBU" target="blank">
    Jason Leung
  </a>
</p>

When you build a web application, often we might need to save data for a user across visits to the website in the future.

You can achieve this functionality with the following:-

- `localStorage` Browser API: for storing data with no expiration date
- `sessionStorage` Browser API: for storing data for just one session i.e, data will be lost when the browser tab is closed

## Local Storage

`localStorage` is a Web API for storing data without any expiration date. The data wouldn't be deleted when the browser tab is closed, and hence would be available the next day, week, month, or year.

. We can store data into it in a key/pair format.

### Storing Data

To store data we need to use the `setItem()` method available in the `localStorage` object.

**Syntax**

```javascript
localStorage.setItem("key", "value");
```

Let's store our user's names.

```javascript
const name = "John Doe";

// storing user's name
localStorage.setItem("name", name);
```

The method accepts:

- the name of the key as the first argument
- the value to store as the second argument

### Get Stored Data

To get the stored data we need to use the `getItem()` method available in the `localStorage` object.

**Syntax**

```javascript
localStorage.getItem("key");
```

Let's retrieve the stored user's name

```javascript
// get stored name
const name = localStorage.getItem("name");
```

The method accepts:

- the name of the key as an argument.
- the method returns the stored value for the key name supplied

### Removing Stored Data

To remove stored data we need to use the `removeItem()` method available in the `localStorage` object.

**Syntax**

```javascript
localStorage.removeItem("key");
```

Let's remove the stored user's name

```javascript
// remove the stored user's name
localStorage.removeItem("name");
```

The method accepts:

- the key name to remove as an argument.

For clearing all saved data from local storage use `localStorage.clear();`

## Session Storage

The sessionStorage object is similar to the localStorage object, except that it stores the data for only one session and this data will be cleared when the page session ends. Thus the sessionStorage exists only within the current browser tab and another tab with the same page will have different storage.

### Storing Data

To store data we need to use the `setItem()` method available in the `sessionStorage` object.

Let's store our user's names.

```javascript
// storing user's name
sessionStorage.setItem("name", "Tom");
```

### Get Stored Data

To get the stored data we need to use the `getItem()` method available in the `sessionStorage` object.

Let's retrieve the stored user's name

```javascript
// get stored name
const name = sessionStorage.getItem("name");
```

### Removing Stored Data

To remove stored data we need to use the `removeItem()` method available in the `sessionStorage` object.

Let's remove the stored user's name

```javascript
// remove the stored user's name
sessionStorage.removeItem("name");
```

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

---