当前位置: 首页 > news >正文

js-cookie和vue-cookies(Cookie使用教程)

简述:js-cookie和vue-cookies都是vue项目中的插件,下载相关依赖后,可以用来存储、获取、删除Cookie等操作,思路相同,操作时稍有不同,当然也可以用原生js来获取Cookie;

⭐                js-cookie  ⭐

使用方式:

1、下载安装依赖,js-cookie;

//在项目中使用npm下载相关依赖npm install --save js-cookie

2、页面引入使用;

//然后在main.js或者需要使用的页面引入import Cookies from 'js-cookie'

3、js-cookie,使用详细(存储 获取 删除);

存储Cookie:

// 创建一个名称为name,对应值为value的Cookie,由于没有设置失效时间,
// 默认失效时间为该网站关闭时
Cookies.set('name', 'value')// 创建一个有效时间为7天的Cookie
Cookies.set('name', 'value', { expires: 7 })// 创建一个带有路径的Cookie
Cookies.set('name', 'value', { expires: 7, path: '' })// 创建一个value为对象的Cookie
const obj = { name: 'xiaohong' }
Cookies.set('user', obj)

获取Cookie:

// 获取指定名称的Cookie
Cookies.get(name) // value// 获取value为对象的Cookie
const obj = { name: 'xiaohong' }
Cookies.set('user', obj)
JSON.parse(Cookies.get('user'))// 获取所有Cookie
Cookies.get()

删除Cookie:

// 删除指定名称的Cookie
Cookies.remove('name')// 删除带有路径的Cookie
Cookies.set('name', 'value', { path: '' })
Cookies.remove('name') //直接删,会报错!
Cookies.remove('name', { path: '' }) // success!// more
// 当你删除一个cookie时,你不依赖于默认属性,
// 你必须传递与用来设置cookie完全相同的路径和域属性:
Cookies.remove('name', { path: '', domain: '.yourdomain.com' })

⭐                vue-cookies  ⭐

使用方式:

1、下载安装依赖,vue-cookies;

npm i --save vue-cookies

2、在main.js中,全局引入使用;

import VueCookies from 'vue-cookies';
Vue.use(VueCookies);

3、vue-cookies,使用详细(存储 获取 删除);

存储一个Cookie:

this.$cookies.set("token", value1, {expires: "7D"});// keyName => "token"// value =>  value1// 设置过期时间 = > {expires: "7D"}

获取一个Cookie:

this.$cookies.get("token")    // return value  

删除一个Cookie:

this.$cookies.remove("token"[, path [, domain]])    // return this

Cookie是否存在:

this.$cookies.isKey("token")    // return false or true

获取所有 Cookie ,以数组形式返回:

this.$cookies.keys()    // return a array

设置Cookie过期时间:

//30天后过期,全局设置
this.$cookies.config('30d')y:year 年
m:month 月
d: day 日
h:hour 时
min: minute 分
s :second 秒
//填的值1d为一天,1h为一小时,1min为一分钟,1s为1秒,不分大小写
//不写过期时间,默认为1天过期

感觉有用,就一键三连,感谢(●'◡'●)

http://www.lryc.cn/news/26481.html

相关文章:

  • 开创高质量发展新局面,优炫数据库助推数字中国建设
  • 【项目实战】为什么我选择使用CloseableHttpClient,而不是HttpClient,他们俩有什么区别?
  • Spark 内存运用
  • SpringBoot集成Swagger3.0(入门) 02
  • 网络协议丨ICMP协议
  • 12.1 基于Django的服务器信息查看应用(系统信息、用户信息)
  • ExSwin-Unet 论文研读
  • 置顶!!!主页禁言提示原因:在自己论坛发动态误带敏感词,在自己论坛禁止评论90天
  • 优思学院|解密六西格玛:探索DMAIC和DMADV之间的区别
  • Pytorch的DataLoader输入输出(以文本为例)
  • 代谢组学:Microbiome又一篇!绘制重症先天性心脏病新生儿肠道微生态全景图谱
  • Java基本类型所占字节简述
  • Linux vi常用操作
  • Unicode(宽字节)、ANSI(多字节)
  • STM32实战之LED循环点亮
  • 智慧厕所智能卫生间系统有哪些功能
  • 【网络】套接字 -- TCP
  • NDK C++ map容器
  • linux(Centos)安装docker
  • Delphi 中 FireDAC 数据库连接(处理错误)
  • 算法小抄3-理解使用Python容器之列表
  • Vue3中watch的value问题
  • 【线性筛+DP】最大和
  • openpnp - configure - 丢弃(Discard)位置的设置
  • java Object 万字详解 (通俗易懂)
  • Java并发简介(什么是并发)
  • 团队API管理工具-YAPI
  • 学习记录 --- Pytorch优化器
  • Flink State 状态后端分析
  • 和年薪30W的阿里测开工程师聊过后,才知道我的工作就是打杂的...