Local Storage and Session Storage - Web Storage API
Published: 2023-03-01 11:00:00

### Storing data in browser

Both `localStorage` and `sessionStorage` are parts of [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) and can be used to store `key/value` pairs locally inside a browser. Data saved in both of these places won't be erased after page refresh (for `sessionStorage`), and surprisingly, after browser restart (`localStorage`). But you can ask a question - we have well known and opinionated cookies so why we even bother using `local/sessionStorage`. Here are the three main advantages of `localStorage/sessionStorage` over cookies:

- **we store all data locally** and we don't send them with every request inside its header straight to a server, it's recommended from the security point of view, it is directly connected with the next advantage,
- thanks to not sending this data with every request, we can save **up to 10 MB of data** for most of modern browsers,
- API is **very easy to understand** in a short period of time and ease to use in our projects

In that situation cookies are definitely are loosing their position. However, they are still usable particularly for all operations related to authentication - but more on this in different article.

### Local and session

Both have the same API and its usage is practically identical. In terms of choosing one of them we mostly take into account how long we need to keep saved data. Further part of this article will consist of examples for `localStorage` but it's worth to mention that these examples will work the same with `sessionStorage` syntax. Data stored in `localStorage` is accessible in the browser between its tabs and windows if they comes from the same _origin_ - if the changes occurred in the other window (but in the same _origin_ - path may be different) - they will be visible in other windows.

### Writing and reading

To write new key/value pair in the `localStorage` we use `setItem()` method - it takes two arguments, the key and corresponding value

```javascript
localStorage.setItem("kangaroo", "🦘");
```

To read the value we use `getItem()` method. It accepts only one argument - previously used key. It returns corresponding value in the form of a string.

```javascript
const myItem = localStorage.getItem("kangaroo");
```

### Updating and deleting

To update the value stored in the `localStorage` we use the same method as in the case of creating new entry - we use the same key but with different argument containing new value.

```javascript
localStorage.setItem("panda", "🐼")

*// myItem = "🐼"*
```

We can remove value from `localStorage` using two methods. Using `removeItem()` which accepts one argument being the key of the `localStorage` object:

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

or remove all items inside the `localStorage` using `clear()` method:

```javascript
localStorage.clear();
```

### Storing different types of data

Using `localStorage` we can store only values of type _string_. Often we will come across the situation when we want to store whole objects. We can achieve that using `JSON.stringify()` and `JSON.parse()` methods in the following way:

To add and update:

```javascript
let myObj = { country: "🇮🇹", dish: "🍕" };

localStorage.setItem(key, JSON.stringify(myObj));
```

This allows as to save inside the `localStorage` as a _string_, not as an object. Due to this, to reuse this object we have to transform our data to the type of object:

```javascript
let item = JSON.parse(localStorage.getItem(key))

*// item = { country: "🇮🇹", dish: "🍕" }*
```

That way variable `item` takes the value of the object `key` and its type is an object so we can perform all operations related to Javascript's objects.

### Checking the storage

From time to time we need to check whether we have some value assigned to a `localStorage`. For this purpose we can use following syntax:

```javascript
if (localStorage.length > 0) {
  // ...
}
```

If `localStorage` contains at least one element, _if_ will return `true`. `localStorage.length` informs us about the number of saved items.

### Summary

Both `localStorage` and `sessionStorage` allows us to store key/value pairs in the browser

- key and value have to be of type string
- size of saved data can be greater than 5MB
- they don't expire
- data is connected with the _origin_

`localStorage` - shared between every tab and window related to the same _origin_, not erased after browser restart

`sessionStorage` - accessible inside browser's tab from the same _origin_, not erased after page refresh but after closing the tab.