Lenio Web Bootcamp

# Storage

# Persist information

Until now we are able to fetch information from any api or anywhere where we can, but, if you leave the current page you had to fetch always the information without any persistence. In this chapter we will learn about the different ways to persist information when you leave a page and go back and still have the information about.

There is some cases when you want to persist information. For example we need store what user already login, or if have some permission to access to some part of the application. Or if you don't have user but you want to save the current items added to the cart and when the user visit again the page will have the same items back if the client does not finish to buy.

So there is 3 main ways to store information:

# LocalStorage

Allow us to store data on the browser. The data is shared between sessions ("tabs") and it never expires. It doesn't matter if the browser is closed or the OS is restarted the data is stored. And allow to store more data than the other methods of storage. The data is stored in a key and value format. So to store do the following:

localStorage.setItem('key', 'data');

And to get the data:

const data = localStorage.getItem('key');

We can also remove an item:

localStorage.removeItem('key');

Or Just clean all:

localStorage.clear();

# SessionStorage

It is similar to the LocalStorage but the data is accessible on the session and it is lost when the session is closed. But the data do survive refresh or restore of the tabs. To store the data is the same as LocalStorage with a key and value.

sessionStorage.setItem('key', 'data');

And to get the data:

const data = sessionStorage.getItem('key');

We can also remove an item:

sessionStorage.removeItem('key');

Or Just clean all:

sessionStorage.clear();

# Cookies

A cookie is a small text file that is stored by a browser. A web page or server sends a cookie on the HTTP header to a browser to store this information and then send it back with each subsequent request based on a set of rules. Web servers can then use this information to identify individual users or keep users preferences.

A simple cookie is set like this:

Set-Cookie: <cookie-name>=<cookie-value>

This shows the server sending headers to tell the client to store a pair of cookies:

HTTP/2.0 200 OK
Content-Type: text/html
Set-Cookie: id=Tony
Set-Cookie: products_count=4

[page content]

Then, with every subsequent request to the server, the browser sends back all previously stored cookies to the server using the Cookie header.

GET /sample_page.html HTTP/2.0
Host: www.example.org
Cookie: id=Tony; products_count=4

It can be defined the expiration date of the cookie:

Set-Cookie: id=Tony; Expires=Thu, 31 Oct 2022 07:00:00 GMT;

And it can be get or set from JavaScript like this:

document.cookie = "id=Tony"; 
document.cookie = "products_count=5"; 
console.log(document.cookie); //"id=Tony; product_count=5;"

Cookies are mainly used for three purposes:

Session management: Logins, shopping carts, game scores, or anything else the server should remember

Personalization: User preferences, themes, and other settings

Tracking: Recording and analyzing user behavior

# Why do I see those annoying pop ups about cookies?

Because the data from the cookie is sent to the server some sites use it to get and store some user behavior. This information is later used to target advertising. For this reason some government organizations create regulations to let the user choose to give this information. Because it is the World Wide Web those regulations apply to any web site beside the government that created the regulations. The regulations are: The General Data Privacy Regulation (GDPR) in the European Union, The ePrivacy Directive in the EU and The California Consumer Privacy Act.

And these regulations include requirements such as:

  • Notifying users that your site uses cookies.
  • Allowing users to opt out of receiving some or all cookies.
  • Allowing users to use the bulk of your service without receiving cookies.
LocalStorage SessionStorage Cookie
Capacity 5/10 Mb (depends on the browser) 5 Mb 4kb
Accessibility All windows Tab All windows
Expiration Never On tab close Manual set
Storage Location Browser Browser Browser and Server
Send on request No No Yes

# Sources

← Request Methods →