转载: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. 关闭Cadence Orcad Capture CIS原理图弹出startpage页面的方法

    打开原理图工具 Orcad Capture CIS 时,总是会弹出startpage 页面,有时候感觉这个东西挺碍事的,还是关了感觉好.解决方法如下:(1) View---Toolbar----Com ...

  2. java+Selenium+TestNg搭建自动化测试架构(2)实现跨浏览器功能

    1.切换浏览器类:其中包含了切换浏览器的方法,以及关闭浏览器,设置等待时间,以及重写的断言方法 package com.rrx.framework; import java.io.IOExceptio ...

  3. vue设置路由跳转参数,以及接收参数

    最近做Vue项目,遇到了一个路由跳转问题:首页要跳转到项目页指定的Tab选项卡项,一开始总是跳到默认项.解决方法如下: 在跳转链接处设置了路由跳转参数,如下: <router-link  :to ...

  4. 观察者模式的python实现

    什么会观察者模式?观察者模式就是订阅-推送模式.是为了解耦合才会被利用起来的设计模式. 经典的就是boss 前台和员工之间的故事.一天A员工在看电影,B员工在看动漫,但是两人担心boss来了,自己没及 ...

  5. Android开发 ViewConfiguration 用法

    ViewConfiguration 实例获取 ViewConfiguration viewConfiguration = ViewConfiguration.get(Context); 常用对象方法 ...

  6. 设计一函数,求整数区间[a,b]和[c,d]的交集

    问题: 设计一函数,求整数区间[a,b]和[c,d]的交集.(c/c++.Java.Javascript.C#.Python)  1.Python: def calcMixed(a,b,c,d): r ...

  7. SAML 2.0初始

    一.背景知识: SAML即安全断言标记语言,英文全称是Security Assertion Markup Language.它是一个基于XML的标准,用于在不同的安全域(security domain ...

  8. python大法好——多线程

    Python 多线程 多线程类似于同时执行多个不同程序,多线程运行有如下优点: 使用线程可以把占据长时间的程序中的任务放到后台去处理. 用户界面可以更加吸引人,这样比如用户点击了一个按钮去触发某些事件 ...

  9. Shell 批量修改主机 用户密码

    问题:132.121.114 和 132.121.118 网段共 48 台主机未添加基础监控,但是 wh 账户不能登录 需进行批量修改密码操作. 目前情况:op1对上述48台机器设备均能免密登录. 操 ...

  10. 44_redux_comment应用_redux版本_同步功能

    项目结构: components里面的东西没变,将app.jsx移动至containers中 /* * 包含所有action的type名称常量 * */ //添加评论 export const ADD ...