js-cookie 是 Javascript 的第三方库，它提供了快速、简便获取、设置、删除 cookie 的方法，非常好用，而且代码量非常少，易于使用。

本文将介绍 JS : Javascript 如何使用 js-cookie 方便、快捷地获取、设置、删除 Cookie。

加载 js-cookie

如果要想使用 js-cookie 必须在网站或者应用中加载 js-cookie，本文说明两种加载 js-cookie 的方法。加载后使用 js-cookie 的方式相同，都是调用 Cookie 类。

直接加载 js-cookie 脚本文件

该种方式可用于在浏览器中加载 js-cookie，只需像加载其他 JavaScript 文件一样，就能使用。

如果你不能访问 github，请点击右侧的下载链接，下载 js-cookie 源码文件，可以直接在浏览器中加载文件使用。

使用 import 导入模块

该种方式可用于 js 应用开发，也可用于在浏览器中加载 js-cookie，在浏览器中使用前需要使用打包工具，打包文件。

1、安装 js-cookie

npm install js-cookie

2、导入 js-cookie

// ES 模块的导入方式，推荐使用
import Cookies from 'js-cookie';

// CommonJS 模块的导入方式
const Cookies = require('js-cookie');

使用 js-cookie 设置 Cookie

设置 Cookie 使用 Cookies.set() 方法，语法形式：

Cookies.set('name', 'value');

设置 Cookie 时设置可以提供一个对象作为选项，如过期时间，PATH 等参数：

Cookies.set('name', 'value', { expires: 7, path: '' });

使用 js-cookie 获取 Cookie

使用 Cookies.get() 函数，只需给出 Cookie 的名称，即可获取 Cookie。

返回值：如果存在则返回值，不存在返回 undefined

Cookies.get('name') // => 'value'

Cookies.get('nothing') // => undefined

使用 js-cookie 删除 Cookie

使用 Cookies.remove() 函数，需要给出 Cookie 的名称，如果没有设置默认属性，需要给出设置 Cookie 时，提供的 path, domain, secure 和 sameSite 参数：

Cookies.remove('name', { path: '', domain: '.yourdomain.com', secure: true });

使用 js-cookie 设置默认属性

使用 js-cookie 的 Cookies.withAttributes() 函数，设置默认属性：

Cookies.withAttributes({ path: '/', domain: '.example.com' });

可用的 Cookie 属性值

expires

该属性用于设置过期时间，该属性的值是一个 Number 值，或者是一个 Date 实例，忽略此参数时，设置的 Cookie 是一个 Session Cookie：

Cookies.set('name', 'value', { expires: 365 })
Cookies.get('name') // => 'value'
Cookies.remove('name')

path

设置可以访问该 Cookie 的路径，该值是一个 String，默认为 “/”：

Cookies.set('name', 'value', { path: '' })
Cookies.get('name') // => 'value'
Cookies.remove('name', { path: '' })

domain

设置可以访问该 Cookie 的域名，该值是一个 String，默认为设置（创建）Cookie 时的域名和子域名：

Cookies.set('name', 'value', { domain: 'subdomain.site.com' })
Cookies.get('name') // => undefined     获取时需要提供域名 'subdomain.site.com')

secure

设置可以访问该 Cookie 的协议是否需要 htttps，该值为 true 或 fasle，默认值为 fasle（即 http 和 https 都能访问该 Cookie）：

Cookies.set('name', 'value', { secure: true })
Cookies.get('name') // => 'value'
Cookies.remove('name')

sameSite

该属性用于设置是否可以跨域发送 Cookie，该值是一个 String，默认值为未设置：

Cookies.set('name', 'value', { sameSite: 'strict' })
Cookies.get('name') // => 'value'
Cookies.remove('name')

结语

本文介绍了 JS : Javascript 如何使用 js-cookie 方便、快捷地获取、设置、删除 Cookie。