安装
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) }
