JS 读取 Cookie 方法总结

什么是 Cookie？

Cookie 是一种存储在用户计算机上的小文件，包含了与某个网站相关的用户信息。浏览器每次向服务器发送请求时，会将 Cookie 信息附加在 HTTP 请求头部中，服务器端可以通过从头部解析得到的 Cookie 信息来判断用户状态并作出相应的响应。

如何读取 Cookie？

以下是几种常用的 JS 读取 Cookie 的方法：

1. document.cookie

通过document.cookie可以读取当前页面请求中携带的所有 Cookie 信息，返回的是一个由键值对字符串组成的字符串。示例如下：

const cookie = document.cookie;
console.log(cookie);
// 输出示例： "__cfduid=d36072b4f98835a4871a9b11d0f4218991592144044; _ga=GA1.2.1470674.1595726819; Hm_lpvt_620bfd7553724d8e4f3ac4331a0f6295=1597183958; Hm_lvt_620bfd7553724d8e4f3ac4331a0f6295=1595726819"

需要注意的是，document.cookie返回的字符串中每个键值对之间都以分号加空格分隔。

2. 使用 Regex 匹配

如果想要读取某个具体键的值，可以使用正则表达式进行匹配。示例如下：

function getCookieValue(key) {
  const regex = new RegExp(`${key}=([^;]+)`);
  const match = document.cookie.match(regex);
  return match && match[1];
}

console.log(getCookieValue('username'));
// 假设当前 Cookie 中有键为 'username'，且其值为 'tom'，则输出 'tom'

上述代码将会读取当前页面中所有的 Cookie 信息，使用正则表达式匹配到键为 'username' 的键值对，并返回对应的值。

3. 使用第三方库

除了手动编写正则表达式进行匹配以外，还可以使用一些第三方库，如 js-cookie。使用该库可以通过简单的 API 快速读取、设置和删除 Cookie。示例如下：

// 先安装 js-cookie 库，安装命令： npm install js-cookie
import Cookies from 'js-cookie';

// 获取键为 'username' 的 Cookie
const username = Cookies.get('username');

// 设置一个名为 'password' 的 Cookie
Cookies.set('password', '123456', { expires: 7 });

// 删除键为 'username' 的 Cookie
Cookies.remove('username');

在以上代码中，我们先使用 import 语句引入了 js-cookie 库。然后，通过 Cookies.get 方法获取当中键为 'username' 的 Cookie 值；通过 Cookies.set 方法设置一个名为 'password' 的 Cookie 值为 '123456'，并设置其过期时间为 7 天；最后，通过 Cookies.remove 方法删除名为 'username' 的 Cookie。

小结

本文介绍了 JS 读取 Cookie 的三种方法，包括 document.cookie、使用正则表达式匹配和使用第三方库 js-cookie。具体使用时需要视情况而定，但这些方法足够满足大多数场景。