Cookies

Cookies are a concept in web development that involves small pieces of data stored by the browser, which are sent back to the server with each HTTP request. This feature is commonly used for session management, tracking user behavior, and storing user-specific information, such as login credentials or preferences.

Cookie是在Web开发中的一个概念，它涉及由浏览器存储的小数据片段，并在每个HTTP请求中发送回服务器。这个特性通常用于会话管理、跟踪用户行为和存储用户特定信息，例如登录凭据或偏好设置。

Here’s how you can use cookies in JavaScript:

以下是如何在JavaScript中使用Cookie：

// Set a cookie
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// Get all cookies
const cookies = document.cookie;

// Delete a cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

This code will set, retrieve, and delete a cookie in the browser:

这段代码将在浏览器中设置、检索和删除Cookie：

// Set cookie: username=JohnDoe
// Retrieve cookies: username=JohnDoe
// After delete: (empty)

Cookies can also be used to store user preferences and session information:

Cookie还可以用于存储用户偏好和会话信息：

// Example of setting multiple cookies
document.cookie = "theme=dark; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
document.cookie = "sessionToken=abc123; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

This code will output:

这段代码的输出将是：

// Cookies: theme=dark; sessionToken=abc123

The comparison of cookies methods is shown in the table below:

Cookie方法的比较如下表所示：

Cookies are very useful for maintaining user sessions, storing small pieces of information, and personalizing the user experience.

Cookie在维护用户会话、存储小量信息以及个性化用户体验方面非常有用。

以下是关于Cookie的5个面试问题及其答案

1. What are cookies, and how do they work?

什么是Cookie，它们是如何工作的？

Cookies are small pieces of data stored by the browser and sent with each HTTP request. They help maintain sessions and track user behavior.

Cookie是由浏览器存储的小数据片段，并在每个HTTP请求中发送。它们帮助维护会话和跟踪用户行为。

2. How do you set and retrieve cookies in JavaScript?

如何在JavaScript中设置和检索Cookie？

document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
const cookies = document.cookie;

document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
const cookies = document.cookie;

3. What are the limitations of cookies?

Cookie有哪些限制？

Cookies have size limitations (typically 4KB), and they are sent with every HTTP request, which can increase the load on network traffic.

Cookie有大小限制（通常为4KB），并且它们随每个HTTP请求一起发送，这可能会增加网络流量负担。

4. How can you delete a cookie?

你如何删除一个Cookie？

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

5. What is the difference between session storage, local storage, and cookies?

会话存储、本地存储和Cookie之间有什么区别？

Session storage and local storage are used to store data locally on the client side, with local storage being persistent across sessions, whereas cookies are sent with each HTTP request and can be used for both client and server-side operations.

会话存储和本地存储用于在客户端本地存储数据，本地存储在会话之间持久存在，而Cookie随每个HTTP请求一起发送，可以用于客户端和服务器端操作。

Recommended Resources:

1. MDN Web Docs: Cookies
2. W3Schools: JavaScript Cookies