This article focuses on the storage methods used in browsers and how they differ in terms of their advantages and disadvantages. Mainly from the following points:
- cookie
- webStorage
- indexedDB
Before we get started, we need to explain the same origin policy.
The same origin policy is a security policy of the browser. Client scripts from different sources cannot read or write resources from each other without explicit authorization. The protocol, domain name, and port number must be the same. Without the same origin policy, XSS and CSRF attacks can easily result.
cookie
The background of cooick is that HTTP is a stateless protocol. Before cooick, the HTTP request header does not have any status mark, which leads to a problem. The server does not know whether the client initiating the request has logged in or purchased other products. This creates quite a bit of trouble for the server to process the request. Therefore, when the client initiates a request, it needs to carry some necessary information for the server to determine the current status of the client that initiates the request, and these information are basically encrypted. At this point, a solution emerged:
- The first time a client makes a request, the server adds a field to the response header
set-cookie. - When the client receives the response, it parses the response header, if it exists
set-cookieField, write it to the browserset-cookieData in. When written, it is bound to the current domain name. - The next time the client makes a request, it will be bound to the domain name
cookieSet to the cookie field in the request header (it must comply with the same origin policy and the path information needs to be the same).
Cooike’s data structure looks like this:
| The property name | interpretation |
|---|---|
| name | Cookie name set |
| value | Cookie value set |
| Domain | Domain name information that identifies the domain to which this cookie belongs. Whether this field is the same origin as the current requested address is determined when the request is sent |
| Path | Path information. If they are homologous, the next step is to determine if the path is the same. For example, /a/ : can match /a/b; /a/b/c, /a can only match www.xxxx.com/a; |
| Expires | Expiration time |
| Size | The size of the |
| HttpOnly | Only passed, not read by script. Prevent XSS attacks |
| Secure | Only carried in HTTPS requests |
| sameSite | Whether cookies can be carried across sites to defend against: CSRF attacks |
| Priority | Priority, chrome’s proposal, defines three priorities: Low, Medium, and High. When the number of cookies exceeds, the lower priority cookies will be cleared first |
Cooike can only store about 4KB due to its limited size during storage. There will be an expiration time and cannot be stored as persistent. If security protection is not implemented, XSS attacks and CSRF attacks may occur.
webStorage
Because of the insufficient storage of cookies, webStorage is generated.
WebStorage is divided into localStorage and sessionStorage. Compared with cookies, these two have a qualitative improvement in the storage size, which can store about 4M data. In addition, like cookies, localStorage and sessionStorage must meet the same origin policy to obtain the corresponding value according to the key value.
When localStorage and sessionStorage are sent, they are not carried to the request header to prevent some security problems, because they are not put in the request header, so it also reduces unnecessary traffic overhead.
However, there are some differences between localStorage and sessionStorage. The difference is that localStorage does not erase data when the page is closed. And can be used across pages. The so-called across pages using refers to: you opened two Windows in your browser, an access is http://www.baidu.com/a.html, another access is http://www.baidu.com/b.html, so because of the agreement, domain name, port number are consistent, conform to the same origin policy. You can access the localStorage data stored at http://www.baidu.com. However, sessionStorage is only valid for the current page, and when the page exits, the stored data will be cleaned up.
indexedDB
Ruan yifeng teacher’s blog has explained in detail. 👀 : How to get started with IndexedDB