vue 中 直接操作 cookie 及 如何使用工具 js-cookie
转载:https://www.cnblogs.com/xiangsj/p/9030648.html
vue 中直接操作 cookie
以下3种操作方式
set: function (name, value, days) {
var d = new Date;
d.setTime(d.getTime() + 24*60*60*1000*days);
window.document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
},
get: function (name) {
var v = window.document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
return v ? v[2] : null;
},
delete: function (name) {
this.set(name, '', -1);
}
使用 js-cookie 工具:(比较方便,推荐使用)
工具地址:https://www.npmjs.com/package/js-cookie
//安装
cnpm i js-cookie
//引入
import Cookies from 'js-cookie'
//使用

具体使用见以下:
Basic Usage
Create a cookie, valid across the entire site:
Cookies.set('name', 'value');
Create a cookie that expires 7 days from now, valid across the entire site:
Cookies.set('name', 'value', { expires: 7 });
Create an expiring cookie, valid to the path of the current page:
Cookies.set('name', 'value', { expires: 7, path: '' });
Read cookie:
Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined
Read all visible cookies:
Cookies.get(); // => { name: 'value' }
Delete cookie:
Cookies.remove('name');
Delete a cookie valid to the path of the current page:
Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // fail!
Cookies.remove('name', { path: '' }); // removed!
IMPORTANT! when deleting a cookie, you must pass the exact same path and domain attributes that was used to set the cookie, unless you're relying on the default attributes.
Note: Removing unexisting cookie does not raise any exception nor return any value
vue 中 直接操作 cookie 及 如何使用工具 js-cookie的更多相关文章
- 018——VUE中v-for操作对象与数值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue中操作Dom节点的方法
1.vue中ref操作dom节点 <template> <div id="app"> <div </div> <button @cl ...
- vue中的input使用e.target.value赋值的问题
很久不写博客了... vue中对表单的处理,相对原生js,增加了一个双向绑定的语法糖:v-model.官方文档里有一段: v-model 会忽略所有表单元素的 value.checked.select ...
- Vue 中的 ref $refs
ref 被用来给DOM元素或子组件注册引用信息.引用信息会根据父组件的 $refs 对象进行注册.如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例 注意:只要想 ...
- vue中的数据监听以及数据交互
现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...
- vue中的锚链接跳转问题
在vue中的锚链接和普通的html不同,关于vue中的锚链接可以参考vue 中的 scrollBehavior 滚动行为. 在router.js中 //创建 router 实例 const rout ...
- Vue中如何插入m3u8格式视频,3分钟学会!
大家都知道video只支持ogg.webm.MP4格式,但是要是m3u8格式的视频怎么办?最近遇到这个问题在网上找了好多办法都不行,最后找到video.js后才完美解决,所以决定写一 ...
- JS Cookie丢失问题
JS Cookie丢失问题 前些天有人问我vue中使用proxy发送请求,为什么请求时cookie丢失,首先说一下我对cookie的理解: 1.cookie在正常情况下是会在每次请求时自动携带, 2. ...
- jquery.cookie中的操作
http://w3school.com.cn/js/js_cookies.asp jquery.cookie中的操作: jquery.cookie.js是一个基于jquery的插件,点击下载! 创建一 ...
随机推荐
- Spring Boot 集成 logback日志
application.properties 配置logback.xml 路径注:如果logback.xml在默认的 src/main/resources 目录下则不需要配置application.p ...
- Docker CMD in detail
CMD CMD 指令就是用于指定默认的容器主进程的启动命令的,我们直接 docker run -it ubuntu 的话,会直接进入 bash.我们也可以在运行时指定运行别的命令,如 docker r ...
- linux ssl证书配置(apache)
1. 前提是 已通过第三方 申请到 .crt .key 和 .ca-bundle 文件 2. 将三个文件拷贝到linux服务器上 任意一个指定的目录 3. 找到要编辑的apache配置 Apache主 ...
- 微信小程序tab栏切换
Wxml代码:<view class="body"> <view class="nav bc_white"> <view clas ...
- maven dependency的版本冲突问题
在改造一个旧项目中,遇到各种问题. 旧项目有十多个模块,因为没有一个统一的父pom,它们对第三方的jar的版本没有统一. 虽然也存在公共的依赖模块,比如commons.util,但是,我们的模块中,有 ...
- python实现将android手机通讯录vcf文件转化为csv
经常会遇到将手机通讯录导出到电脑并转化为在电脑中可编辑的情况,在网上搜索了很久当前不外乎两种处理方式.1.使用电脑的outlook的通讯簿功能,将手机导出的vcf文件导入到outlook的通讯录中,然 ...
- Echarts属性大全(及时更新最新信息)
echarts属性的设置(完整大全) // 全图默认背景 // backgroundColor: ‘rgba(0,0,0,0)’, // 默认色板 color: ['#ff7f50','#87c ...
- (转)get和post的区别
Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP ...
- JAX-RS和 Spring 整合开发
JAX-RS 和 和 Spring 整合开发 1.建立maven项目 2.导入maven坐标 <dependencies> <!-- cxf 进行rs开发 必须导入 --> & ...
- [PHP]正则表达式判断网址
来源:https://segmentfault.com/q/1010000000584340/a-1020000000584362 Markdown 的作者之一写的正则表达式(原文在这) (?i)\b ...