Web Storage APIs
Tags: javascript, 100daysofcode, codenewbie
Published: 2021-03-06 20:01:42

Web Storage APIs are used by developers to store some data into web browsers. Here data represents the **key-value** pair of strings.

Now there are two methods to store this data: 
- Session storage
- Local Storage

## Session Storage

> sessionStorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores)

When we store data in the session storage that means data is persisted only for that particular session.

But what is a session?

Suppose a user is visiting a web app & as soon as he visits a web app a session is started, and the data that is stored in this session storage will only be persisted for that particular session, till he is on that particular web window. As soon as he closes the window or that particular session, the data is lost.

- Unlike cookies, the session storage data is not sent back to the server while making the network request call. 
- Session storage data has a larger capacity to hold compares to cookies.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1615056380550/orfqmYcqo.png)

## Local Storage

Similar to Session storage, it stores the key-value pair of strings but the main difference here is it does not come with the expiry. So even when the user closes the web browser the data is still persisted on the web browser.

- In local storage, you can store the data in the client's browser as long as you want.
- Local storage has the highest memory capacity when compared to session storage and cookies.
- Getting a data from local-storage is much faster than making a network call and fetch the data from the server.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1615055544752/NT7B9Qf9n.png)

In the above image, you will see how to use local storage `setItem` & `getItem` methods.

But what if you want to store some objects in the local storage?

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1615055865328/cLi2hW7Gv.png)


But this is not what we expected. So now what to do?

Now JSON `stringify` and `parse` methods come into the picture.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1615056067557/JByJderCj.png)




________________________________________________________________________________________________________

## Same-Origin Policy

All these web storage APIs follow a **same-origin** policy due to security reasons.

Origin comprises three things:
- Protocol: HTTP or HTTPS
- Host or Domain
- Port

So when we say that we setting some data in the local-storage that means we are setting data for that particular origin.

let's say we store some data on `http://abc.com`. 

**- Can we access the same data on `http://abc.com/collection.php`?**

Yes, because we are of the same origin i.e. our host, port, and protocol all remain the same.

**- Can we access the same data on `https://abc.com`?**

No, because we are not of the same origin now. Here we are using a different protocol.

**- Can we access the same data on `https://xyz.abc.com`?**

Again the answer is **NO** because we are not using the same host here. When you put some sub-domain over here, the host changes. 

So now you understood that local storage is different for each origin in a web browser.

This is how **same-origin** policy plays an important role here.

## Wrap Up!!

Thank you for your time!! Let's connect to learn and grow together.

[LinkedIn](https://www.linkedin.com/in/anuradha-aggarwal-4a2751107/) [Twitter](https://twitter.com/Anuradh06359394)

[![Buy-me-a-coffee](https://cdn.buymeacoffee.com/buttons/v2/default-blue.png)](https://www.buymeacoffee.com/anuradha2612)