document.cookie 使用小结

我们来详细讲解一下 document.cookie 的使用小结。

一、概述

document.cookie 属性是用于读取和设置 Cookie 的，它可以让我们在客户端存储非常小且不敏感的数据。document.cookie 属性返回所有 cookie 名称及其对应值。但请记住，document.cookie 属性不是一个数组，而是一个字符串，而且无法支持删除 cookie，因为删除 cookie 必须要设置 cookie 的过期时间为过去的日期。

同时，由于 document.cookie 是字符串类型，我们通常需要用到它的各种 API 来解析和修正 cookie。

二、读取 cookie

要读取 cookie，只需要读取 document.cookie 属性即可。它返回以分号（;）分隔的 cookie 名称及其对应值。

console.log(document.cookie); // 输出所有 cookie 名称及其对应的值

三、设置 cookie

要设置 cookie，需要将名称、值以及其他的属性如过期时间、域、路径等使用分号（;）组成的字符串写入 document.cookie 属性即可。如下面这个例子，设置一个名为 color，值为 red 的 cookie，并设置有效期为 7 天：

document.cookie = "color=red; expires=" + new Date(Date.now() + 7*24*60*60*1000).toUTCString();

其中，我们使用 expires 属性设置了 cookie 的过期时间，它的值必须是 GMT 格式时间。这里使用了 new Date() 和 toUTCString() 方法将当前时间加上了 7 天，然后转换为了 GMT 格式时间。

如果要设置其他的属性如域、路径、安全等，也可以在字符串中加入对应的属性名称及其值，如下：

document.cookie = "name=value; domain=example.com; path=/; secure";

上面的例子设置了一个域名为 example.com，路径为根路径 /，并启用了安全模式的 cookie。

四、删除 cookie

删除 cookie 非常简单，只需要将过期时间设置为过去的日期即可。

document.cookie = "name=value; expires=" + new Date(0).toUTCString();

五、注意事项

• 在设置和删除 cookie 时，请避免在 cookie 值中使用分号（;）和逗号（,），因为这两个符号用于分割 cookie 名称及其属性。
• document.cookie 属性通常限制在 4096 个字符，如果超出了这个限制，后续的 cookie 将被忽略。
• 由于 cookie 可以被修改，所以请不要在 cookie 中存储敏感信息。可以使用服务器端 session 或者 JWT 等技术来替代。
• JavaScript 只能访问设置在当前域名和路径下的 cookie，不能访问其他域名或路径下的 cookie。

希望这篇使用小结对你有帮助！