在前端开发中，Cookie 是一种常见的存储数据的方式。而 Cookies.js 是一个方便操作 Cookie 的npm包。本文将介绍如何使用 Cookies.js来操作 Cookie，以及一些特殊情况下的注意事项。
安装
首先需要安装 Cookies.js，我们可以通过 npm 来进行安装：
npm install cookies-js
使用
使用 Cookies.js 时，我们需要先引入它：
import Cookies from 'cookies-js';
然后，就可以使用 Cookies 对象来设置、获取和删除 Cookie，例如：
// 设置 cookie
Cookies.set('name', 'value');
// 获取 cookie
const name = Cookies.get('name');
// 删除 cookie
Cookies.expire('name');值得注意的是，当我们不给 Cookie 设定过期时间时，Cookie 将会默认存在于浏览器的内存中，即称为“会话 Cookie”，它只在当前会话期间有效。如果我们希望 Cookie 在多个会话之间保持有效，我们需要为其设定一个过期时间：
// 设置带有过期时间的 cookie
Cookies.set('name', 'value', { expires: 7 }); // 过期时间为 7 天除了设置 Cookie 过期时间，Cookies.js 还支持其他的选项（例如：域名、路径等），请参考其文档。
特殊情况
设置 HttpOnly Cookie
HttpOnly Cookie 是一种无法通过 JavaScript 访问的 Cookie，它可以有效地防止 XSS 攻击。要设置 HttpOnly Cookie，我们只需要添加一个选项：
Cookies.set('name', 'value', { httpOnly: true });跨域设置 Cookie
由于浏览器的同源策略，通常情况下无法在跨域请求中设置 Cookie。但是，设置 CORS 响应头部 Access-Control-Allow-Credentials 为 true 的话，就可以让浏览器在跨域请求中携带 Cookie 了。
例如，在服务器端设置 CORS 响应头：
res.setHeader('Access-Control-Allow-Origin', 'http://example.com');
res.setHeader('Access-Control-Allow-Credentials', true);然后，在客户端发送跨域请求时，也需要指定 withCredentials 选项为 true：
fetch('http://api.example.com/data', {
credentials: 'include',
});总结
Cookies.js 是一个方便操作 Cookie 的 npm 包，我们可以使用它来设置、获取和删除 Cookie。在使用 Cookies.js 时，我们需要注意一些特殊情况，例如：设置 HttpOnly Cookie 和跨域设置 Cookie。掌握这些知识，可以帮助我们更好地开发前端应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34494