This is the 18th day of my participation in the August Genwen Challenge.More challenges in August

Client-side storage technology — Cookie

HTTP is stateless, that is, it does not remember the user’s operations, which makes us limited in remembering the user’s state (such as login information, personal preferences, etc.) and other scenarios. Therefore, cookies appear to make up for the deficiency of HTTP in state management.

First, the role of cookies

Application scenario: Maintain the form information so that users can refresh the page without losing it. Store the browsing record, read the page is not afraid to find;

A Cookie is essentially a small text file stored in the browser, stored internally as key-value pairs; Send a request to the same domain name, will carry the same Cookie, the server gets the Cookie for parsing, can get the state of the client;

When the server responds to an HTTP request, it contains session information by sending the set-cookieHTTP header. For example, the following HTTP response contains cookies:

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value
Other-header: other-header-value
Copy the code

The HTTP response sets a name=value cookie, and both the name and value are URL-encoded when sent. The browser stores this session information and sends it back to the server via HTTP header cookies on each subsequent request, such as:

GET /index.jsl HTTP/1.1
Cookie: name=value
other-header: other-header-value
Copy the code

This additional information sent back to the server can be used to uniquely identify the client that sent the request. In simple terms, the server saves the session information in the browser through set-cookie when responding.

URL encoding: A format used by browsers to package form input. For example, in the request address HTTP :localhost:3000? Id =1&name= McCard, then in this URL? The following parameters are encoded to be transmitted; Chinese will use UTF-8 character set to encode;

Second, the composition and implementation of cookie

The field, path, expiration time, and Secure flags are used to tell the browser that the cookie should be included in the request in case of life. These parameters are not sent to the server along with the request, only the name/value pair of the cookie is actually sent.

When setting the value, you can set a new cookie string through the document.cookie property. This string is parsed and added to the original cookie. Setting document.cookie does not overwrite any previously existing cookies unless an existing cookie is set. Set the format of the cookie as follows, the same as the format of the set-cookie header:

document.cookie = "key=value; expires=expiration_time; path=domain_path; domain=domain_name; secure";
Copy the code

Parameters are separated by a semicolon. Such as:

document.cookie = "name=mannqo";
Copy the code

This line of code creates a session cookie with name=mannqo. This cookie is carried each time the client sends a request to the server and is deleted when the browser is closed. Although this can be set directly, since no characters need to be encoded in names or values, it is best to use encodeURIComponent() to encode keys and values; Such as:

document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("mannqo");
Copy the code

To specify additional information for the cookie you create, simply append a string of the same format directly to it as in the set-cookie header;

Third, cookies

Child cookies are only a brief introduction here;

  • A sub-cookie is a small piece of data stored in a single cookie, essentially using the value of the cookie to store multiple name/value pairs in a single cookie; The most commonly used value cookie mode:name=name1=value1&name2=value2&name3=value3
  • Subcookies are formatted like query strings, and the values can be stored as individual cookies rather than as their own name/value pairs. The result is a Web site or Web application that can store more structured data under the single-domain cookie limit.

4. Precautions for using cookies

There are http-only cookies that can be set in the browser or on the server, but can only be read on the server because JavaScript cannot retrieve the value of these cookies.

  • Cookies are bound to a specific domain. When the cookie is set, it is sent along with the request to the domain it created. This restriction ensures that the information stored in the cookie is only available to approved recipients and not accessed by other domains.
  • Cookies can only store a small amount of information. If the total number of cookies exceeds the upper limit of a single domain, the browser will delete the cookies previously set. In order to avoid uncertain results, it is best not to exceed the limit.
  • Cookie requests carry complete cookies each time, which will cause performance waste as the number of requests increases.
  • Security defects. In the form of plain text in the browser and server transmission, easy to be illegally intercepted and tampered with;

Note: Do not store important or sensitive information in cookies. Cookie data is not kept in a secure environment, so anyone can access it. You should avoid storing private information in cookies.