vue 中 直接操作 cookie 及 如何使用工具 js-cookie

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

原文地址:https://www.cnblogs.com/xiangsj/p/9030648.html

时间: 2024-10-09 12:52:37

vue 中 直接操作 cookie 及 如何使用工具 js-cookie的相关文章

jquery.cookie中的操作

jquery.cookie中的操作: jquery.cookie.js是一个基于jquery的插件,点击下载! 创建一个会话cookie: $.cookie(‘cookieName’,'cookieValue’); 注:当没有指明cookie时间时,所创建的cookie有效期默认到用户浏览器关闭止,故被称为会话cookie. 创建一个持久cookie: $.cookie(‘cookieName’,'cookieValue’,{expires:7}); 注:当指明时间时,故称为持久cookie,并

vue中cookie的使用

1.存放cookieimport md5 from 'blueimp-md5'import cookie from 'js-cookie'import url from '../api/url.js'import http from '../api/http.js'// 每个input输入框的错误提示显示的条件:// 1.匹配当前输入框输入的内容是否满足格式限制(从输入前就已经在实时判断)// 2.是否打开错误提示--此为手动打开export default { data () { return

横冲直撞vue(第四篇):v-model、指令系统总结、指令系统示例轮播图实现、指令系统示例跑马灯效果实现、在vue中使用样式的方式

一. v-model v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素. 尽管有些神奇,但v-model本质上不过是语法糖.它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理. v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件: text 和 textarea 元素使用 value 属性和 input 事件: checkbox

better-scroll在vue中的坑

在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 也可以是横向滚动的导航栏,如图所示: 可以打开"微信 -> 钱包->滴滴出行"体验效果. 我们在实现这类滚动功能的时候,会用到我写的第三方库,better-scroll. 什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里.better-scroll

vue中mixin的一点理解

vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父组件的各种属性方法都被扩充了. 单纯组

jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档。

jquery.cookie中的操作: jquery.cookie.js是一个基于jquery的插件,https://github.com/carhartl/jquery-cookie 创建一个会话cookie: $.cookie(‘cookieName’,'cookieValue’); 注:当没有指明cookie时间时,所创建的cookie有效期默认到用户浏览器关闭止,故被称为会话cookie. 创建一个持久cookie: $.cookie(‘cookieName’,'cookieValue’,

vue中的$nextTick()

vue中$nextTick()作用 1.vue更新数据是异步的 1.0中确实是通过v-el:xxx标记dom然后在组件里通过this.$els.xxx就可以获得这个dom对象了,$nextTick(() => {})与dom相关操作写在该函数回调中,确保DOM已渲染. 2.什么是Vue.nextTick() 在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,获取更新后的DOM.所以就衍生出了这个获取更新后的DOM的Vue方法.所以放在Vue.nextTick()回调函数中

Vue中对生命周期的理解

Vue中对生命周期的理解 1. 实例.组件通过new Vue() 创建出来之后会初始化事件和生命周期,然后就会执行beforeCreate钩子函数,这个时候,数据还没有挂载ね,只是一个空壳,无法访问到数据和真实的dom,一般不做操作 2. 挂载数据,绑定事件等等,然后执行created函数,这个时候已经可以使用到数据,也可以更改数据,在这里更改数据不会触发updated函数,在这里可以在渲染前倒数第二次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取 3. 接下来开始找实例

vue中使用keepAlive组件缓存遇到的坑

项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 上一篇讲了keep-alive的基本用法,现在说说遇到的坑. 先说项目中的配置 在App.vue中的设置 在router中增加配置meta 上面这个设置后发现问题了,从category进入detail页后,状态被保存了,返回的时候保存了用户状态,达到了预期效果 但问题在于但从category返回到index后,再由index进入category时依然显