一行JS代码读取网站缓存cookie

字数 747，阅读大约需 4 分钟

今天我们来聊聊一个前端开发中很常见的小需求：读取浏览器里的cookie。

你可能觉得这很简单。确实，用JavaScript读取cookie的代码可以非常短。短到只用一行。但这一行代码背后，有很多细节值得我们去了解。

那行著名的“一行代码”

不卖关子了。在JavaScript中，读取所有cookie最经典的一行代码是这样的：

   const cookies = document.cookie;

对，就这么简单。document.cookie是一个特殊的属性。你读取它，它会返回当前页面域名下所有可访问的cookie，把它们拼接成一个字符串。

你可以在浏览器的开发者工具（按F12）里，打开Console（控制台）标签，直接输入这行代码试试看。你会看到一个像这样的字符串：

   "username=张三; theme=dark; last_visit=2023-10-27"

这个字符串有几个特点：

1. 不同的cookie用分号和空格（; ）隔开。

2. 每个cookie是键=值的形式。

3. 它只返回名称和值，不包含cookie的其他属性，比如过期时间、作用域等。

问题来了：怎么拿到单个cookie的值？

document.cookie返回的是一个“大杂烩”字符串。我们通常想要的是某一个特定cookie的值，比如username。

所以，我们需要从这个字符串里，把我们需要的那部分“切”出来。这催生了另一段非常经典、同样可以压缩成一行的代码：

   function getCookie(name) {
  return document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop() || '';
}

你可以这样使用它：

   let userName = getCookie('username');
console.log(userName); // 输出：张三

更现代的选择

现在，很多以前用cookie来存的数据，有了更好的存放地方：Web Storage API。

它主要包含两个对象：

• localStorage：数据长期保存，除非手动删除。

• sessionStorage：数据只在当前浏览器标签页有效，关闭标签页就消失。

它们的用法比cookie更简单、更直观：

   // 存数据
localStorage.setItem('username', '张三');
sessionStorage.setItem('临时令牌', 'abc123');

// 取数据
let user = localStorage.getItem('username'); // "张三"
let token = sessionStorage.getItem('临时令牌'); // "abc123"

// 删数据
localStorage.removeItem('username');

和cookie比，Web Storage的优点很明显：

• 操作简单，不用自己拼接字符串、解析字符串。

• 容量更大，通常是5MB或更多。

• 数据不会随着每次HTTP请求自动发送给服务器（节省流量）。

那么，什么时候还用cookie呢？

• 需要让服务器也能读取的数据（比如用户认证令牌）。因为cookie会在每次请求中自动携带。

• 需要设置HttpOnly、Secure（仅HTTPS）、SameSite（防跨站请求伪造）等安全属性的场景。

• 需要设置特定过期时间的场景（localStorage是永久的）。

最后几句话

document.cookie这行简单的代码，是前端与浏览器存储交互的一扇小门。
它背后连着Web开发的基础：状态管理、用户隐私、安全问题。