首先看一下基础知识： 1、什么是cookie cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值 2、有关cookie的例子： •名字 cookie 当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 “Welcome John Doe!” 的欢迎词。而名字则是从 cookie 中取回的。 •密码 cookie 当访问者首次访问页面时，他或她也许会填写他/她们的密码。密码也可被存储于 co
JavaScript中的Cookie是客户端存储数据的一种方式，它在用户浏览网页时被创建，并存储在用户的浏览器上。每当同一台计算机通过浏览器请求页面时，浏览器会自动将Cookie一同发送给服务器。Cookie通常用于跟踪用户状态，例如登录信息、购物车内容、个性化设置等。
1. **什么是Cookie？**
Cookie是服务器在用户浏览器上设置的一小段文本信息，由浏览器负责存储。每个Cookie都包含一个名称、值、过期时间、路径和域。浏览器根据这些信息管理Cookie的生命周期和使用范围。JavaScript可以通过`document.cookie`属性读取和修改Cookie。
2. **创建Cookie**
创建Cookie通常涉及以下几个步骤：
- 定义一个函数，例如`setCookie`，接受Cookie的名称、值和过期天数作为参数。
- 创建一个新的Date对象`exp`，通过`getTime()`获取当前时间，并加上过期天数对应的毫秒数（一天有24*60*60*1000毫秒）。
- 设置`document.cookie`的值，格式为`name=value; expires=date`，其中`date`是转换为GMT字符串的过期日期。
示例代码：
```javascript
function setCookie(name, value, expireday) {
var exp = new Date();
exp.setTime(exp.getTime() + expireday * 24 * 60 * 60 * 1000);
document.cookie = name + "=" + escape(value) + "; expires=" + exp.toGMTString();
}
```
3. **读取Cookie**
读取Cookie通常涉及解析`document.cookie`字符串，因为这个字符串是一个分号分隔的键值对列表。可以将字符串分割成数组，然后遍历数组找到目标Cookie的名称。另外，可以使用正则表达式匹配特定名称的Cookie。
示例代码：
```javascript
function getCookie(name) {
var cookieStr = document.cookie;
var cookieArr = cookieStr.split(";"); // 将cookie信息转换成数组
for (var i = 0; i < cookieArr.length; i++) {
var cookieVal = cookieArr[i].split("=");
if (cookieVal[0] == name) {
return unescape(cookieVal[1]);
}
}
}
```
4. **使用Cookie**
在实际应用中，可以通过检查Cookie是否存在来提供个性化的用户体验。例如，一个简单的例子是欢迎用户回到网站。如果Cookie中存在用户名，就显示欢迎信息；否则，提示用户输入用户名并将其存储为Cookie。
示例代码：
```javascript
function checkCookie() {
var cookieUser = document.getElementById("cookieUser");
var userName = getCookie("userName");
if (userName) {
cookieUser.innerHTML = "您好" + userName + "，欢迎再次回来！";
} else {
var value = prompt("请输入用户名", "");
if (value) {
setCookie("userName", value, 1);
} else {
alert("请输入用户名！");
}
}
}
```
这个示例会在页面加载时调用`checkCookie`函数，检查是否有名为`userName`的Cookie。如果没有，将弹出一个对话框让用户输入用户名，并将输入值存入Cookie。
5. **Cookie的限制**
- Cookie大小有限制，通常不超过4KB。
- 每个域名下最多只能存储20个Cookie。
- 不同的路径和域可以设置不同的Cookie，但它们之间不会共享。
- 浏览器允许用户禁用或清除Cookie，这可能影响到基于Cookie的功能。
总结，JavaScript中的Cookie是实现用户状态持久化的重要工具，虽然有其局限性，但在许多场景下仍然是必要的，比如用户身份验证、个性化体验和页面统计等。理解如何创建、读取和管理Cookie对于前端开发者来说是必不可少的技能。
