转载: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. Layout-1相关代码

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. java——collection总结

    Collection 来源于Java.util包,是非常实用常用的数据结构!!!!!字面意思就是容器.具体的继承实现关系如下图,先整体有个印象,再依次介绍各个部分的方法,注意事项,以及应用场景.   ...

  3. Python2--Pytest_html测试报告优化(解决中文输出问题)

    1.报告的输出: pytest.main(["-s","Auto_test.py","--html=Result_test.html"]) ...

  4. JS sort() 方法

    如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序.要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较. array.s ...

  5. Linux部署笔记分享

    # Linux部署 ## 安装lrzsz1. 安装lrzsz: yum -y install lrzsz2. 进入tmp目录3. rz 上传安装文件 jdk-8u65-linux-x64.tar.gz ...

  6. 阿里云短信验证使用(PHP)

    1.登陆阿里云后台,事先添加签名和模板 2.使用composer下载阿里云SDK composer require alibabacloud/sdk 在PHP7.0下安装需要提前安装curl扩展 -c ...

  7. Nginx 安装学习笔记(1.安装和启动)

    centos7 编译安装和启动.停止https://www.cnblogs.com/xingyunblog/p/9072553.html 一.安装nginx 1.下载 wget http://ngin ...

  8. ARM-start.s注释(2410Init.s)

    本人只是做个笔记保存一下. 来源:http://blog.itpub.net/13771794/viewspace-478463/ ;================================= ...

  9. Taro开发之城市选择器(带坐标)

    要写个城市选择器能返回对应的城市(这里只定义到了地级市),同时返回坐标系,参考了网上资料,下面就看看具体代码吧 import Taro, { Component } from '@tarojs/tar ...

  10. 用dockerfile创建jmeter的docker镜像

    网上多是创建docker镜像是从jmeter官方下载jmeter的tgz包 今天我们用本地已经下载好的tgz包. 以下是dockerfile FROM java:8 ENV http_proxy &q ...