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

运营需要亿点资金维持，您的支持，是小白龙创作的动力！！！

暂无评论，欢迎留下你的评论