js 操作 COOKIE 读写删

JavaScript中的Cookie操作是Web开发中常见的一种数据存储方式，它主要用于在用户浏览器端保存少量信息。Cookie可以帮助我们实现用户会话跟踪、个性化设置保存等功能。本文将深入探讨如何使用JavaScript进行Cookie的创建（写入）、读取和删除操作。 ### 1. Cookie的基本概念 Cookie是由服务器端发送到客户端（浏览器）的一小段文本信息，浏览器会在每次向同一服务器发送请求时附带此信息。每个Cookie都有一个名字、值、过期时间和路径等属性。在JavaScript中，我们可以通过`document.cookie`来操作Cookie。 ### 2. 写入Cookie 写入Cookie主要通过设置`document.cookie`的值来完成。例如，创建一个名为`username`、值为`JohnDoe`的Cookie： ```javascript function setCookie(name, value, days) { var expires = ""; if (days) { var date = new Date(); date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000); expires = "; expires=" + date.toUTCString(); } document.cookie = name + "=" + value + expires + "; path=/"; } setCookie("username", "JohnDoe", 7); // 保存7天 ``` 这段代码中，`days`参数表示Cookie的有效天数，如果不设置，默认为会话Cookie，即浏览器关闭后失效。 ### 3. 读取Cookie 读取Cookie则需要解析`document.cookie`字符串，因为该属性返回的是所有Cookie组成的字符串，每条Cookie之间用分号分隔。以下是一个简单的读取函数： ```javascript function getCookie(name) { var cookieArr = document.cookie.split(";"); for (var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); if (name === decodeURIComponent(cookiePair[0].trim())) { return decodeURIComponent(cookiePair[1]); } } return null; } console.log(getCookie("username")); // 输出"JohnDoe" ``` 这个函数通过遍历Cookie字符串，找到指定名字的Cookie并返回其值。 ### 4. 删除Cookie 删除Cookie是通过设置过期时间为过去的时间来实现的。调用`setCookie`函数，将`days`参数设置为负数即可： ```javascript function deleteCookie(name) { setCookie(name, "", -1); } deleteCookie("username"); // 删除username Cookie ``` 这将会使得`username`Cookie立即过期，并在下次浏览器刷新时被清除。 ### 5. 其他注意事项 - **大小限制**：每个Cookie的大小不能超过4KB，且每个浏览器可能有不同数量的Cookie限制。 - **安全性**：Cookie信息是存储在客户端的，因此不应包含敏感信息。对于需要安全存储的数据，应考虑使用服务器端存储或HTTPS加密传输。 - **路径和域**：Cookie可以设置特定的路径和域名，使得只在特定的URL下有效。默认情况下，Cookie在设置的URL及其子路径下有效。 在提供的`testC(cookie).htm`文件中，你可以看到一个简单的示例，演示了如何使用上述方法进行Cookie操作。通过查看和运行这个例子，你可以更好地理解JavaScript与Cookie的交互方式。