# Web Storage API - Explain Like I'm Five

Web browsers today have a huge range of features, and more and more will get them.

We all know about cookies in our browsers, but browsers today have a special feature called the Web Storage API that allows us to temporarily or permanently store values.

## What is the Web Storage API?

The Web Storage API is a browser functionality that can store data in key-value format. The purpose of this browser API is to make the site more intuitive than cookies.

A big advantage of the Web Storage API is that values are stored even if the user closes the browser.

But where is the data stored? Data stored using the Web Storage API is stored in an SQLite file in the user's local folder.

The data stored in `localStorage` and `sessionStorage` can be accessed anywhere in the application with the JavaScript code.


![Keyboard image](https://cdn.hashnode.com/res/hashnode/image/upload/v1655148017994/5P1RvHD33.jpg align="center")

## Difference between `localStorage` and `sessionStorage`

The Web Storage API has two data storage functions, `localStorage` and `sessionStorage`, the main difference between the two being that localStorage remains stored in the browser until it is deleted (it can also be permanent). However, SessionStorage is only stored until the user closes the browser. SessionStorage is a useful thing if you want to save some value in a browser instead of a cookie.

In this article, I will focus on `localStorage`, but almost all functions and features are the same as `sessionStorage`.

## `LocalStorage`

LocalStorage, as I mentioned earlier, stores data in key-value format.

`localStorage` knows five main functions that can be used anywhere within the application.

These features are:

- `setItem()`, the function allows us to store values in `localStorage`,
- `getItem()`, allows us to retrieve a specific value from `localStorage`,
- `removeItem()`, the function allows us to remove key with value from `localStroage`,
- `clear()`, the function clears all `localStorage`,
- `key()`.

**setItem()**

With this feature, we can store the value in our localStorage.

Using the feature is very simple. The function accepts two parameters, the first is the key and the second is the value of this key.

```js
window.localStorage ("key", "value");
```

In `localStorage` we can store different data types such as string, int, bool, object…

The `JSON.stringify` function allows us to save a JSON object to `localStorage`.

```js
const user = {
	id: 12345,
    name: "John Doe",
    email: "john.doe@example.com",
}

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

**getItem()**

With this function, we can get the value stored in `localStorage`. The function accepts one parameter, which is the value we want to get from memory.

```jsx
window.localStorage.getItem ('user');
```

The function will return a string with the value:

```
"{" id ": 12345," name ":" John Doe "," email ":" john.doe@example.com "} '
```

Since such a string cannot be used in our application, it must be returned to the JSON object. This is done with the `JSON.parse()` function

```jsx
JSON.parse(window.localStorage.getItem('user'));
```

**removeItem()**

The `removeItem()` function is used to remove only one element from localStorage.

The function accepts only one parameter and that is the name of the key we want to remove from `localStorage`. Removes the item if the key exists.

```jsx
window.localStorage.removeItem ('user');
```

**clear()**

With the `clear()` function, we remove all elements in `localStorage`.

The function does not accept any parameters.

```jsx
window.localStorage.clear();
```


![Computer image](https://cdn.hashnode.com/res/hashnode/image/upload/v1655148077870/NS6Drkviv.jpg align="left")

### Disadvantages of `localStorage`

Everything has its drawbacks and so does `localStorage`, one of the biggest is limiting the amount of data we can store to 5 MB.

Another drawback is that `localStorage` is synchronous, which means that items can be accessed gradually.

---

I hope I have introduced you to how we can store data in a browser in a different way.

Let's connect:

🔹[Twitter](https://twitter.com/Patik123_)

🔹[Instagram](https://instagram.com/patik_123_)

🔹[GitHub](https://github.com/patik123)

🔹[PolyWork](https://polywork.com/patik123)