js-cookie插件教程
2023-01-02 18:44:29
2025-01-25 19:25:11
简介
js-cookie是一个简单的,轻量级的处理cookies的js API。 通过npm安装后, 首先要在main.js中引入,否则报错。 在其他的单页面vue文件中使用js-cookie时, 每次使用都要再次引入, 否则报错。不能全局引入或者挂载到Vue的实例上。
安装
shell
npm i js-cookie -S
在main.js入口文件中引入
js
import Cookies from 'js-cookie'
在test.vuevue单文件中使用
首先引入import Cookies from 'js-cookie'。 然后在methods中定义的方法中去根据js-cookie的使用语法进行操作
最基础用法
js
// 设置cookie
Cookies.set('name', 'andy凌云');
// 获取cookie 获取不到返回undefined
Cookies.get('name');
// 直接获取解析后的全部cookie对象
Cookies.getJSON();
// 删除cookie
Cookies.remove('name');
进阶用法
js
// 1. 设置cookie
Cookies.set("name", { foo: "bar" }); // json格式
// Create an expiring cookie, valid to the path of the current page:
Cookies.set("name", "andy凌云", { expires: 7, path: "" }); // 7天过期
// 2. 读取cookie
Cookies.get("name"); //读取名字为name的cookie,
Cookies.get(); // 读取所有的cookie,结果是个对象。
Cookies.getJSON(); // 读取所有cookie, 结果是个解析后的对象, 推荐使用
// 3. 删除cookie
Cookies.remove('name') // 最基本的方式是根据所存的键值删除对应cookie
// 删除全部cookie
/* 在网上搜了半天, 没搜到删除全部cookie的API方法。 笨的办法通过Cookies.get()去获取
全部cookie组成的对象,然后遍历对象,根据各个键的值去依次删除 */
let allCookies = Cookies.get();
Object.keys(allCookies).forEach((item)=>{
Cookies.remove(item);
})
// 删除完成后, 再取Cookies.get()得到是一个空对象
//4. 特殊使用(在cookie中读取对象或数组)
// 跟一般使用不同的是,从Cookie中取出的时候,要从字符串转换成json格式:
const user = {
name: "lia",
age: 18
};
const nameList = [
'andy凌云',
'天道酬勤',
'地道酬善'
]
Cookies.set('user', user)
Cookies.set('nameList', nameList)
// 4.1 使用基础的JSON.parse方法去将get后的字符串解析为对象或数组
JSON.parse(Cookies.get("user"));
JSON.parse(Cookies.get("nameList"));
// 4.2 使用js-cookie自带的getJSON方法, 直接就解析成了能直接进行操作的数组或对象
Cookies.getJSON('user');
Cookies.getJSON('nameList');
// 如果是想直接操作所有的cookie对象,建议不要使用Cookies.get(),因为它得到的值是字符串,还需要使用JSON.parse()去解析, 最好使用Cookies.getJSON()。
set方法支持的属性
属性 | 说明 |
---|---|
expires | 定义有效期。如果传入Number,那么单位为天,你也可以传入一个Date对象,表示有效期至Date指定时间。默认情况下cookie有效期截止至用户退出浏览器 |
path | string,表示此cookie对哪个地址可见。默认为'/' |
domain | string,表示此cookie对哪个域名可见, 设置后cookie会对所有子域名可见。默认为对创建此cookie的域名和子域名可见 |
secure | true或false,表示cookie传输是否仅支持https。默认为不要求协议必须为https |
封装公共方法来操作token
js
import Cookies from 'js-cookie'
const TokenKey = 'Admin-Token'
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}
目录