Browser storage (local storage, session storage, cookies)

Types of browser storage

- Web Storage: a key-value store made for saving web data on the client.

Web Storage is a client-based key-value store added in HTML5, and it can be divided into local storage and session storage. Local storage and session storage differ mainly in persistence and scope. First, local storage keeps its data even after the browser is closed (persistent). It also has the property that data is shared globally as long as the domain is the same. Session storage deletes its data when the browser is closed (non-persistent). Even if the domain is the same, a different browser (a browser tab, another browser) has a different browsing context, so each one gets its own session storage and the data isn't shared.

Local Storage is located at window.localStorage and Session Storage at window.sessionStorage, and you can read them by key-value.

- Cookie: a key-value store made for continuous data exchange between the server and the client.

Cookies were made in the first place so that the server and the client could keep exchanging data.

Cookies have a 4KB size limit, and each site can have 20 cookies.

Cookies can also have an expiration date.

Because cookies were made for communicating with the server, you need to be more careful with them!

If a cookie holds a lot of useless values, network traffic goes up by that much.

Differences between Web Storage and cookies

Unlike cookies, Web Storage isn't sent to the server and can only be sent explicitly, so it doesn't put a load on the server. Also, since you only take values out when you need them, there's no risk of automatic sending, and when another origin makes a request, it can't take the values out even if it wants to, thanks to access being restricted per origin. (CSRF) Web Storage also has more room than cookies.

Reference: https://ryuhojin.tistory.com/10