在前端开发中，我们常常需要在浏览器中保存/读取一些数据，例如用户登录状态、用户的某些偏好设置等等。而这些数据通常是通过 Cookie 技术来存储的。虽然原生的 JavaScript API 也提供了一些操作 cookie 的方法，但它们比较繁琐。此时，js-cookie 就可以派上用场了。本文将详细介绍如何使用这个 npm 包。
安装
首先，在你的项目目录下执行以下命令来安装 js-cookie：
npm install js-cookie
初始化
在使用 js-cookie 之前，需要先调用它的 noConflict 方法，避免和其他可能存在的库或框架产生冲突。在你的入口文件（例如 main.js）中，加入以下代码：
import Cookies from 'js-cookie' const myCookie = Cookies.noConflict()
在后面的代码中，你可以通过 myCookie 这个变量来调用 js-cookie 的各种方法，而不会与其他库产生冲突。
使用方法
设置 Cookie
使用 set 方法来设置一个 Cookie。它的参数如下：
key（必选）：要设置的 Cookie 的键名。value（必选）：要设置的 Cookie 的值。options（可选）：一个对象，包含了一些选项参数，例如过期时间、路径、域名、是否仅在 HTTPS 连接下有效等等。
示例代码：
myCookie.set('username', 'John', { expires: 7, path: '' })这段代码会将一个名为 username，值为 John，过期时间为 7 天，路径为根目录的 Cookie 写入浏览器。
读取 Cookie
使用 get 方法来读取一个 Cookie。它只有一个参数，即要读取的 Cookie 的键名。
示例代码：
const myUsername = myCookie.get('username')这段代码会读取 username 这个 Cookie 的值并将其存储在 myUsername 变量中。
删除 Cookie
使用 remove 方法来删除一个 Cookie。它只有一个参数，即要删除的 Cookie 的键名。
示例代码：
myCookie.remove('username')这段代码会删除 username 这个 Cookie。
可选选项
在上面的例子中，我们使用了 options 参数来设置一些可选选项。下面是一些常用的选项：
expires：Cookie 的过期时间，可以是一个数值（表示过期的天数）或一个 Date 对象。如果不设置这个选项，则默认情况下 Cookie 会在当前会话结束时过期。path：Cookie 的有效路径。如果不设置这个选项，则默认为当前页面的路径。domain：Cookie 的域名。如果不设置这个选项，则默认为当前页面的域名。secure：一个布尔值，表示 Cookie 是否仅在 HTTPS 连接下有效。如果不设置这个选项，则默认为 false。
使用上的注意事项
- 不要过多地依赖 Cookie。因为 Cookie 可被恶意网站利用，所以敏感信息应该存储在后端，而不是在 Cookie 中。
- 如果你需要在多个页面中共享信息，不要过度依赖 Cookie。因为 Cookie 只能在同一个域名下共享，如果你需要在不同域名下共享信息，应该使用其他方法，例如使用后端 API。
- 不要存储过多的信息在 Cookie 中，因为每个 HTTP 请求都会包含所有 Cookie，而这可能会增加网络流量和延迟（在一定程度上）。
总结
上面介绍了如何在前端中使用 npm 包 js-cookie。使用它可以方便地设置、读取和删除 Cookie，并提供了各种选项以控制 Cookie 的行为。在使用上应该注意一些限制和注意事项。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5e604361730352721e2af179