转载: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的更多相关文章

  1. 018——VUE中v-for操作对象与数值

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. vue中操作Dom节点的方法

    1.vue中ref操作dom节点 <template> <div id="app"> <div </div> <button @cl ...

  3. vue中的input使用e.target.value赋值的问题

    很久不写博客了... vue中对表单的处理,相对原生js,增加了一个双向绑定的语法糖:v-model.官方文档里有一段: v-model 会忽略所有表单元素的 value.checked.select ...

  4. Vue 中的 ref $refs

    ref 被用来给DOM元素或子组件注册引用信息.引用信息会根据父组件的 $refs 对象进行注册.如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例 注意:只要想 ...

  5. vue中的数据监听以及数据交互

    现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...

  6. vue中的锚链接跳转问题

    在vue中的锚链接和普通的html不同,关于vue中的锚链接可以参考vue 中的  scrollBehavior 滚动行为. 在router.js中 //创建 router 实例 const rout ...

  7. Vue中如何插入m3u8格式视频,3分钟学会!

    ​        大家都知道video只支持ogg.webm.MP4格式,但是要是m3u8格式的视频怎么办?最近遇到这个问题在网上找了好多办法都不行,最后找到video.js后才完美解决,所以决定写一 ...

  8. JS Cookie丢失问题

    JS Cookie丢失问题 前些天有人问我vue中使用proxy发送请求,为什么请求时cookie丢失,首先说一下我对cookie的理解: 1.cookie在正常情况下是会在每次请求时自动携带, 2. ...

  9. jquery.cookie中的操作

    http://w3school.com.cn/js/js_cookies.asp jquery.cookie中的操作: jquery.cookie.js是一个基于jquery的插件,点击下载! 创建一 ...

随机推荐

  1. Python unittest discover()方法与执行顺序补充

    一.discover更多测试用例 可以根据不同的功能创建不同的测试文件,甚至是不同的测试目录,测试文件中还可以将不同的小功能划分为不同的测试类,在类下编写测试用例,让整体结构更加清晰 但通过addTe ...

  2. 数据传输流程和socket简单操作

    一.***C/S架构:客户端(client)/服务端(server)架构, B/S架构:浏览器(browser) / 服务端(server)架构 软件cs架构:浏览器,qq,微信,陌陌等等硬件cs架构 ...

  3. es6的理解

    目录:let——和var的区别const 特性:暂时性死区解构赋值 [] {}属性简洁函数简洁 属性表达式可以作为对象的属性名字符串扩展数组扩展对象扩展 Object.getPrototypeOf(实 ...

  4. thunderbird 日历

    参考: Configuring Thunderbird and Using it to Access Office 365 Mail and Calendar in Cardiff Universit ...

  5. yum源配置问题

    目前我所知有三种情况: 1. 完全公网环境 2. linux所处内网,但可以代理至公网 3. 完全内网 这里讨论下第三种情况,如果是处在完全内网情况下,可以使用linux安装时的iso镜像包作为本地y ...

  6. servlet对象的生命周期

    servlet对象默认第一次访问的时候创建,服务器关闭的时候销毁.当servlet对象创建的时候会调用init方法,当对象销毁的时候,会调用destroy方法,每次访问servlet时,都会调用ser ...

  7. Mac系统home目录权限修改【转载】

    转载自:http://ju.outofmemory.cn/entry/283070 最近,想把某程序安装到mac下的/home目录下面,发现没有权限,即便是使用sudo命令也无法创建程序目录,在网上查 ...

  8. for 和while循环 if else

    for和 while循环 当你知道循环次数的话就用for循环, 不知道的时候用while循环,while必须要有结束条件 a +=1  等于 a =a+1 for i in  xxx: i:是一个变量 ...

  9. vue keep-alive 原理

    前人种树:https://segmentfault.com/a/1190000011978825 add : 使用 keep-alive 组件后,组件生命周期会新引入两个钩子

  10. U3D 设置帧率与垂直同步

    1,设置帧率: Application.targetFrameRate = 60: //-1为无限制 2,垂直同步 project settings -> quality,任何level的垂直同 ...