After learning Cookie, the realization of login registration function, and have a new understanding.

First of all, let’s take a look at the basics of cookies, which are very important points (mainly refer to Teacher Ruan Yifeng’s blog here).

Basic concepts of cookies

1. Cookie is a small piece of text information saved by the server in the browser, <! Note that here is the server saved in the browser > 2. The size of each Cookie generally does not exceed 4KB 3. Every time the browser to the server to launch a request, it will automatically attach this information < note automatic two words, is automatic, this function is completed by the browser itself, so we write Js do not care how to get cookies how to pass to the server, the browser will help us completeCopy the code

Common scenarios for cookies

Cookies are mainly used to distinguish whether two requests come from the same browser, and to save some status information, commonly used in:

1. Session management: Save login, shopping cart and other information to be recorded. 2. Personalized: save user preferences, such as the background color of the web page, font size, etc. 3. Tracking: Record and analyze user behaviorCopy the code

Many people use cookies for client-side storage, and while this is possible, it is not recommended.

Cookie is not designed as a whole and has a small capacity of only 4KB, which lacks data operation interface and affects performance (every request is sent to the server, which takes up a lot of space. If you have a 3KB Cookie and send 10 requests, a total of 30KB of data will be transmitted on the network).Copy the code

The Web Storage API and IndexedDB are recommended for client storage.

Basic information about cookies

1. Name 2. Value (the real data is written here) 3. Domain name (current domain name by default) 5. Effective path (current web address by default)Copy the code
For example: when we visit www.example.com, the server writes a Cookie to the browser and what does the Cookie contain? 1. Cookie name and value 2. www.example.com this domain name 3. Root path'/', the root path is'/'This means that the Cookie is valid for the root path of the domain and for all of its subpaths... Note: If the path is set to /forums, this Cookie will only be valid if www.example.com/forums and its sub-paths are accessedCopy the code
Check to see if the browser window open the Cookie function. The navigator. CookieEnabled / /trueGets the Cookie document. Cookie of the current web pageCopy the code

Cookie size and number limits

Each browser has different limits on the size and number of cookies, but generally speaking, a single domain name (note that this is a single domain name) should not exceed 30 cookies, and the size of each Cookie should not exceed 4kb. After the size exceeds 4kb, cookies will be ignored and will not be setCopy the code

Share a Cookie

The browser's same-origin policy states that two web sites, as long as they have the same domain name and the same port, can share cookies. Note that the protocol does not need to be the same. In other words, the Cookie set by http://example.com can be read by https://example.comCopy the code

Cookie and HTTP protocol

1. The Cookie generated

How does the server write cookies to the browser? The server simply places a set-cookie field in the response header. Set-cookie: foo = bar; HTTP/1.0 200 OK Content-type: text/ HTML set-cookie: yummy_cookie=choco set-cookie: tasty_cookie=strawberry; Expires=<date>; Domain=<domain-value>; Path=<path-value>; Secure; HttpOnly [Page content] If you want to change a previously set Cookie, four conditions must be met: the Cookie's key, domain, path, and secure match. If only one property is different, a new Cookie is generatedCopy the code
Cookie Example: set-cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnlyCopy the code

2. Send a Cookie

When the browser sends an HTTP request to the server, each request carries a Cookie. That is, send back the information that the server saved in the browser earlier. The Cookie field of the HTTP header is used. An example of a request: GET /sample_page.html HTTP/1.1 Host: www.example.org Cookie: yummy_cookie=choco; tasty_cookie=strawberryCopy the code

The attribute of the Cookie

  1. Expires: Specifies the expiration time. The value is in the UTC format. If this parameter is not set, the Cookie will be deleted after the browser closes
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;
Copy the code
  1. The max-age property specifies the number of seconds the Cookie will exist from now on, such as 60 * 60 * 24 * 365 (a year). After this time, the browser no longer keeps the Cookie.
  2. If both Expires and max-age are specified, the max-age value takes precedence.
  3. Domain
Domain Indicates the Domain name to be used when the browser makes an Http request. If the Cookie is not set, the Cookie is the level 1 Domain name of the current URL by default. www.example.com will be Set to example.com, and any future HTTP requests that visit any subdomain name example.com will also carry this Cookie if the domain name specified by the set-cookie field is not the current domain name, Then the browser will reject the CookieCopy the code
  1. Path
For example, if the Path attribute is /, the request /docs Path will also contain the Cookie. Of course, the premise is that the domain name must be consistent.Copy the code
  1. Secure
The Secure property specifies that the browser can send this Cookie to the server only if the encryption protocol HTTPS is used. On the other hand, if the current protocol is HTTP, the browser automatically ignores the Secure attribute sent by the server. This property is just a switch and does not need to specify a value. If the communication is HTTPS, this switch is automatically turned on.Copy the code
  1. HttpOnly
The HttpOnly attribute specifies that the Cookie is not available through JavaScript, mainly the Document. Cookie attribute, the XMLHttpRequest object, and the Request API. This prevents the Cookie from being read by the script and is carried only when the browser makes an HTTP request.Copy the code