Detailed explanation of JS browser storage

introduction

As I get to know the front end more and more deeply, I have learned about many browser storage solutions, such as Cookies, LocalStorage, etc. What are the similarities and differences between these storage solutions, and what are their respective applicable scenarios?

Cookie

Sources of Cookies

Cookies were not originally created for local storage, but to identify users. As we all know, the Http protocol is stateless, which means that every request you send to the server is isolated to the server, and the server does not know who these requests come from. For example, you added some items to the shopping cart, but when you sent the checkout request, the server was confused. How can I know who you are and what you bought? After using Cookies, the server can determine the sending user by checking the Cookie. To a certain extent, Cookies can be said to be the identity card of the request. It can tell the server who the request was sent from.

What are Cookies

Seeing is believing, let’s take a look at what Cookie looks like

This is the cookie used by Baidu's homepage. As you can see, the cookie is stored in the browser as a Name-Value pair, where the Value is obviously encrypted data.

Cookie generation method

The cookie belongs to the domain name, or the cookie of Baidu homepage. Through the Domain attribute, we can know that the first two cookies belong to .baidu.com

Each domain name can only set and access cookies under its own domain name. For example, baidu.com cannot access cookies with the domain sougou.com. However, the subdomain can read the cookies set by the parent domain. For example, in the screenshot, www.baidu.com reads the cookie with Domain='.baidu.com'. By manually setting the Domain, you can set the cookie of the parent domain. For example, www.baidu.com can set Domain='baidu.com' so that all subdomains of *.baidu.com can also read the cookies it sets.

//www.baidu.com

document.cookie='age=20;domain=.baidu.com'

// At this time, all second-level domain names can directly read this cookie

Cookies are generated in two ways: server-side generation and browser-side generation.

Server side - by setting the set-cookie in the HTTP response header

We can specify the cookie value to be stored through the Set-Cookie in the response header. When the request returns to the browser, the browser will set the cookie according to the set-cookie value in the header. By default, Domain is set to the host name of the page that sets the cookie. Of course, we can also manually set the Domain value.

Set-Cookie: id=a3fWa;

In the browser-js, you can read and write cookies through document.cookie and display them in the form of key-value pairs

document.cookie="id=a3fWa"
document.cookie='age=20;domain=.baidu.com'

Application scenarios of Cookies

Since the function of cookies is to tell the server who the request comes from, its main function is to keep the user logged in (remember the password). In addition, it can also record user browsing data, push advertisements and the shopping cart mentioned above.

Disadvantages of Cookies

The shortcomings are actually very obvious in the previous article.

Not big enough

Cookies are sent with every request, which means that there must be a strict size limit for cookies. The size of each cookie is limited to 4kb. It is worth noting that 4kb refers to the size of a Name-Value, not that the total size of cookies that can be set for this domain is only 4kb.

Performance drawbacks

Cookies follow the domain name and will be sent with every request to the same domain name. However, a large number of requests, such as requests for static resources such as images, do not require cookies at all. Although each cookie is only 4kb, a small amount of it will result in a huge waste of resources.

We can put static resources on CDN. At this time, the image domain name is different from the main site domain name, and no cookies will be sent.

Not safe enough

Just as we can see the cookies by directly opening the console, although the cookies are encrypted through encoding, they are transmitted in plain text during HTTP transmission. The script can also easily obtain the cookies, which is very easy to be cracked.

When setting a cookie on the server side, attach the HttpOnly tag so that the browser cannot access the cookie using document.cookie

Set-Cookie: id=a3fWa; HttpOnly

Cookies marked as Secure should only be sent through Https protocol encrypted requests, but even so, cookies should not be used to store sensitive information, because cookies are inherently insecure, and these two tags cannot provide definite security guarantees.

Workaround

Since Cookies have so many shortcomings, is there any permanent solution? That is "professional people do professional things".

The task of storing user login status and some user information is handed over to Seesion --- that is, Cookie is only used to store a unique user identifier, and the real information is stored on the server side. Cookie is used as SeesionID to search for information on the server. In this way, the capacity limitation of Cookie and security issues are solved, because at this time the Cookie contains a string of meaningless random codes.

The task of local storage is handed over to the new local storage solution "Web Storage" in HTML5, which is divided into two categories: localStorage and SessionStorage. Next, I will introduce these two brothers.

LocalStorage

Features

• Data is stored for a long time until it is manually deleted
• Size is about 5M
• Like cookies, a website can only access and manipulate data under its own domain name.
• Only used on the client side, and no communication with the server side
• Better interface encapsulation
• Use key-value pairs to store information
• The same-origin window can access

Usage Examples

LocalStorage is very convenient to use:

// Set data localStorage.setItem("key","value");
//Read data let valueLocal = localStorage.getItem("key");

Usage scenarios

From the above features, we can see that LocalStorage is very suitable for local caching and can increase the loading speed of the first screen. Some large resources that do not change frequently, such as pictures, can also be cached to reduce network requests.

SessionStorage

Features

• The save time is for this session, which means it will be gone once the window is closed.
• Only this window can access it, other windows with the same source cannot.
• Small about 5M

Usage scenarios

sessionStorage is more suitable for storing lifecycle and session-level information that is synchronized with it. This information is only applicable to the current session. For example, it can be used to persist form data to prevent form data from being lost after refreshing.

Differences between Cookies, LocalStorage, and SessionStorage

Differences in scope

All three follow the protocol, that is, the same data can be accessed and modified under the same protocol, the same domain name, and the same port. The only difference is that SeesionStorage also requires the same window.

Differences in life cycle

• Cookies can be manually set to expire. The default is the duration of the current session. Cookies are deleted when the window is closed. When an expiration time is set, they are stored on the hard disk until the expiration time.
• LocalStorage is a persistent local storage that will always exist unless you delete it manually.
• SessionStorage is session-level storage and is also deleted when the window is closed.

Summarize

These are several browser storage solutions. Of course, we should decide when to use which solution based on the characteristics of each solution. The most suitable one is the best. Summarize the key points of this article

• The job of cookies is not local storage, but to "maintain state"
• Web Storage is a data storage mechanism provided by HTML5 specifically for browser storage, and does not communicate with the server.

The above is a detailed explanation of the details stored by JS browsers. For more information about JS browser storage, please pay attention to other related articles on 123WORDPRESS.COM!