js-cookie读写浏览器中的Cookie及其应用

文档：

• https://www.npmjs.com/package/js-cookie

安装

CDN

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

npm

npm install js-cookie --save

示例

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

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

Cookies.remove('name');

// JSON
Cookies.set('name', { foo: 'bar' });

Cookies.get('name'); // => '{"foo":"bar"}'

Cookies.getJSON('name'); // => { foo: 'bar' }

注意，如果set指定了额外参数path 和 domain ,那么get和remove有需要指定

测试示例

浏览器控制台进行测试

引入js库文件

$i("https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js")

分别对3个情况进行写入、读取、删除

1. 默认         domain=null
2. 当前子域名    domain: "www.demo.com"
3. 顶级域名      domain: ".demo.com"

测试代码

Cookies.get()
{}

// 设置cookie ，domain最前面的点可以不写
Cookies.set("name", "default")
"name=default; path=/"

Cookies.set("name", "domain", {path:"/", domain: ".demo.com"})
"name=domain; path=/; domain=.demo.com"

Cookies.set("name", "domain-www", {path:"/", domain: "www.demo.com"})
"name=domain-www; path=/; domain=www.demo.com"

// 读取 谁最后设置，读取出来的就是谁
Cookies.get()
{name: "domain-www"}

// 移除
Cookies.remove("name")
undefined

Cookies.remove("name", {path:"/", domain: "www.demo.com"})
undefined

Cookies.remove("name", {path:"/", domain: "demo.com"})
undefined

因为Cookies是基于document.cookie的

document.cookie只有两个操作

// 写(设置和删除)： 
document.cookie = value

// 读(只能读取key=value，没有属性)： 
value = document.cookie

应用

在前端项目中，将登录凭证token 保存到本地，并设置过期时间

token.js

import Cookies from 'js-cookie'

const TOKEN_KEY = 'token'
const EXPIRES_DAY = 7; // 有效期 天

// 获取token
export function getToken() {
  return Cookies.get(TOKEN_KEY)
}

// 设置token
export function setToken(token) {

  let options = {
    expires: EXPIRES_DAY,
  };
  
  return Cookies.set(TOKEN_KEY, token, options)
}

// 移除token
export function removeToken() {
  return Cookies.remove(TOKEN_KEY)
}