JavaScript Cookie设置、获取与删除详解

JavaScript Cookie是一种在客户端存储小型数据的技术，主要用于实现网站的会话管理和用户个性化设置。本文将详细介绍如何在JavaScript中设置、获取和删除Cookie。 1. 设置Cookie JavaScript通过`document.cookie`属性来操作Cookie。当我们调用`document.cookie`时，可以将一个包含名称/值对的字符串设置为浏览器的本地存储。例如： - 单个键值对：`document.cookie = "userId=828";` - 多个键值对：`document.cookie = "userId=828; userName=hulk";` 注意，名/值对之间使用分号`;`和空格分隔，并且不能在名称或值中使用分号、逗号、等号或空格。对于值中的特殊字符，如空格，可以使用`escape()`函数将其转义为十六进制表示，如`"str="+escape("Iloveajax")`。 2. 值的编码与解码 `escape()`函数用于编码值，使之可以安全地存储在Cookie中。比如`"I love ajax"`会被编码为`"I%20love%20ajax"`。取值时，需要使用`unescape()`函数解码，恢复原始值。 3. Cookie的持久性和覆盖 虽然`document.cookie`看似像一个可直接赋值的属性，但它的行为更像是添加新的键值对，而不是替换。例如，执行`document.cookie="userId=828; userName=hulk"`不会覆盖原有的`userId`，而是新增一个`userName`。若要更新某个Cookie的值，需重新赋值，如`document.cookie="userId=929";`。 4. 获取Cookie的值 获取Cookie的值可以通过`document.cookie`获取到，然后解析字符串。通常，我们会根据特定的键（name）来定位和提取值。不过，由于Cookie是以分号和空格分割的字符串，可能需要处理字符串解析以找到正确的键值对。 5. 删除Cookie 要删除Cookie，可以设置其有效期为过去的时间，或者直接将该Cookie的名称和路径设置为空。例如，要删除名为`userId`的Cookie，可以这样做： ```javascript document.cookie = "userId=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; ``` JavaScript Cookie在前端开发中扮演着重要角色，它们帮助保持用户状态，实现站点个性化，但需要注意隐私和数据安全问题。了解并正确使用Cookie是Web开发人员必备的技能。