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

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。