`js-cookie` 用于在浏览器中处理 cookies。

一、设置和获取 cookies

1. 简单的 API

提供了简洁直观的 API，使得设置、获取和删除 cookies 变得非常容易。

设置 cookie

Cookies.set("name", "value", { expires: 7 }); // 设置名为“name”，值为“value”，有效期为 7 天的 cookie

获取 cookie

const value = Cookies.get("name"); // 获取名为“name”的 cookie 的值

删除 cookie

Cookies.remove("name"); // 删除名为“name”的 cookie

2. 支持选项

可以设置一些选项来控制 cookie 的行为，如有效期、路径、域名等。

设置有效期

Cookies.set("name", "value", { expires: 7, path: "/" }); // 设置有效期为 7 天，路径为根路径的 cookie

设置域名

Cookies.set("name", "value", { domain: "example.com" }); // 设置域名为“example.com”的 cookie

二、在前端应用中的作用

1. 用户状态管理

可以使用 cookies 来存储用户的登录状态、偏好设置等信息。当用户再次访问应用时，可以通过读取 cookies 来恢复用户的状态，提供更好的用户体验。

存储登录状态

if (userIsLoggedIn) {

  Cookies.set("loggedIn", "true", { expires: 30 }); // 用户登录成功后，设置表示登录状态的 cookie

}

读取登录状态

const loggedIn = Cookies.get("loggedIn");

if (loggedIn === "true") {

  // 用户已登录，显示相应的内容

} else {

  // 用户未登录，显示登录页面

}

2. 跨页面数据传递

在单页应用（SPA）或多页面应用中，可以使用 cookies 来在不同页面之间传递数据。例如，可以将用户在一个页面上选择的语言设置存储在 cookie 中，然后在其他页面上读取这个设置来显示相应的语言内容。

跨页面传递数据

// 在页面 A 中设置 cookie

Cookies.set("selectedLanguage", "en", { expires: 30 });



// 在页面 B 中读取 cookie

const selectedLanguage = Cookies.get("selectedLanguage");

if (selectedLanguage === "en") {

  // 显示英文内容

} else {

  // 显示其他语言内容

}

3. 与后端交互

可以将一些信息存储在 cookies 中，然后在与后端服务器的交互中使用这些信息。例如，可以将用户的身份验证令牌存储在 cookie 中，以便在后续的请求中发送给服务器进行身份验证。

存储令牌

const token = "your-auth-token";

Cookies.set("authToken", token, { expires: 30 });

在请求中发送令牌

fetch("https://api.example.com/data", {

  headers: {

    Authorization: `Bearer ${Cookies.get("authToken")}`,

  },

})

  .then((response) => response.json())

  .then((data) => {

    // 处理数据

  })

  .catch((error) => {

    // 处理错误

  });