With the development of the Internet, we increasingly use browsers for web browsing, shopping, logging in and other operations. In these processes, we often hear a word - cookie. So what exactly are cookies? What is its function? Today we will reveal the mystery of cookie storage, analyze the interaction between the browser and the server in detail, and give specific code examples.
1. What are cookies?
Simply put, a cookie is a small piece of data sent by the server to the browser and stored locally. Each time the browser makes a request to the same server, it will bring the previously saved cookie data. In this case, the server can read the cookie data in the browser and perform corresponding operations based on the information in it.
2. The role of cookies
Through cookies, the server can identify the user and keep it when the user visits the website again. The user's session state. For example, when we log in, the server will send a cookie containing our login information to the browser, so that when we visit the website again, the server can recognize us like the last time and log in automatically.
Through cookies, the server can obtain some of the user's personal habits and preferences and other information, thereby providing users with more personalized services and suggestions. . For example, when we browse a shopping website, the server will recommend related products based on our previous purchase records and browsing history.
Through cookies, the server can track the user's browsing habits to perform relevant analysis and statistics. For example, an advertising company can use cookies to track information such as the time and frequency of users' visits to different websites, so as to understand users' interests and purchasing desires and provide advertisers with better advertising promotion services.
3. Interaction between the browser and the server
The saving and acquisition of cookies are carried out between the browser and the server. The entire interaction process can be divided into the following four steps:
To better understand this process, let’s look at a specific example.
(1) Server code example
The following is a server code written using the Node.js framework to send a response containing cookie information to the browser.
const http = require('http'); http.createServer((req, res) => { //设置cookie res.writeHead(200, { 'Set-Cookie': 'name=cookie_test; max-age=60' }); //发送响应 res.end('Hello World! '); }).listen(8080); console.log('Server running at http://localhost:8080/');
Code analysis:
(2) Browser code example
The following is a browser code written in JavaScript to send a request to the above server and output cookie information when the response is received .
// 发送请求 fetch('http://localhost:8080') .then(response => { // 读取cookie console.log(response.headers.get('Set-Cookie')); return response.text(); }) .then(data => { console.log(data); }) .catch(error => console.error(error));
Code analysis:
4. Common attributes of cookies
In addition to the max-age attribute used in the above example, cookies have many other attributes. Common attributes are as follows:
This attribute specifies the path of the cookie. When the browser initiates a request, the cookie will be brought only if the request path exactly matches the cookie path.
res.writeHead(200, { 'Set-Cookie': 'name=value; Path=/test' });
This attribute specifies the domain name of the cookie. When the browser initiates a request, the cookie will be included only if the requested domain name exactly matches the domain name of the cookie.
res.writeHead(200, { 'Set-Cookie': 'name=value; Domain=.example.com' });
This attribute specifies the validity period of the cookie. After this attribute is set, the cookie will automatically expire at the specified time and be deleted by the browser.
res.writeHead(200, { 'Set-Cookie': 'name=value; Expires=Wed, 18 Nov 2020 08:51:29 GMT' });
This attribute specifies whether the cookie can only be sent through the https protocol. After setting this attribute, the cookie will only be brought when an https request is made.
res.writeHead(200, { 'Set-Cookie': 'name=value; Secure' });
This attribute specifies whether the cookie can only be sent through the http protocol. After setting this attribute, the browser cannot obtain the cookie information through JavaScript, thereby improving cookie security.
res.writeHead(200, { 'Set-Cookie': 'name=value; HttpOnly' });
5. Summary
Through the introduction of this article, we have learned about the definition, function, storage method and common attributes of cookies. At the same time, we also learned the cookie interaction model between the browser and the server, and deepened our understanding of cookies through specific code examples. As a front-end engineer, we should have an in-depth understanding and mastery of cookie-related knowledge in order to apply it more flexibly and efficiently in actual development.
The above is the detailed content of The mystery of cookie storage revealed: a detailed explanation of the interaction between the browser and the server. For more information, please follow other related articles on the PHP Chinese website!