在Vue中怎么使用 cookie 之 js-cookie

和黑猫之家聊聊?

今天来看下一个轻量级的 cookie 的 API : js-cookie

安装
npm install js-cookie --save
引用

首先在 main.js 导入

import jsCookie from 'js-cookie'

然后把他放在Vue原型l里, 在页面里可直接用 this.$cookie调用

Vue.prototype.$cookie = jsCookie;
设置 cookie
this.$cookie.set('key', 'value');

还可以设置cookie的有效期 / 路径 /所在域 等, 如下

this.$cookie.set('name', 'value', { expires: 7, path: '/a' });

即为/a路径设置了一个有效期为 7 天的cookie
如上, 第三个参数是个对象, 可设置你想设置的cookie的属性, 如下

1.expires : 定义有效期。如传入Number,则单位为天,也可传入一个Date对象,表示有效期至Date指定时间。
默认情况下cookie有效期截止至用户退出浏览器。
2.path : string,表示此cookie对哪个地址可见。默认为”/”。
3.domain : string,表示此cookie对哪个域名可见。设置后cookie会对所有子域名可见。
默认为对创建此cookie的域名和子域名可见。
4.secure : true或false,表示cookie传输是否仅支持https。默认为不要求协议必须为https。

获得 cookie

获得某个cookie

// this.$cookie.get('cookie-name');this.$cookie.get('name'); // return  'value'

获得所有的cookie

// 不传值 即 获得所有 cookie 的值this.$cookie.get(); // retuen { name1: 'value1', name2: 'value2', ...}

获得指定的cookie

// 获得 xxx.xxxx.com 域下的 cookiethis.$cookie.get('name', { domain: 'xxx.xxxx.com' })
删除 cookie
// 只需要指定 cookie 的 name即可this.$cookie.remove('name');

如果值设置了路径,则不能用简单的delete方法删除值,需在delete时指定路径

this.$cookie.set('name', 'value', { path: '' });this.$cookie.remove('name'); // 删除失败this.$cookie.remove('name', { path: '' }); // 删除成功

注意 : 删除不存在的cookie不会报错也不会有返回

JSON 用法

cookie 一般只保存 string, 当你传入Array或对象,而不是简单的string,那么js-cookie会将你传入的数据用 JSON.stringify 悄悄的转换为string保存。

this.$cookie.set('name', { key1: 'value1' });this.$cookie.get('name'); // return  '{"key1":"value1"}'this.$cookie.get(); // return  { name: '{"key1":"key1"}' }

也可用getJSON获取cookie,则js-cookie会用JSON.parse解析string并返回。

this.$cookie.getJSON('name'); // return { key1: 'key1' }this.$cookie.getJSON(); // return { name: { key1: 'key1' } }

自定义覆盖

通过withConverter方法可以覆写默认的decode实现,并返回一个新的cookie实例。所有与decode有关的get操作,如Cookies.get()或Cookies.get(‘name’)都会先执行此方法中的代码。

document.cookie = 'escaped=%u5317';document.cookie = 'default=%E5%8C%97';let cookiesNew = this.$cookie.withConverter((value, name) => {
    if ( name === 'escaped' ) {
        return unescape(value);
    }});cookiesNew .get('escaped'); // 北cookiesNew .get('default'); // 北cookiesNew .get(); // { escaped: '北', default: '北' }

通过withConverter方法也可以覆写默认的encode实现,并返回一个新的cookie实例。

this.$cookie.withConverter({
    read: function (value, name) {
        // Read converter
    },
    write: function (value, name) {
        // Write converter
    }});


黑猫之家

来黑猫之家看看呗

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Copyright © 2015-2019 | 黑猫吧(www.heimaoba.cn) | 赣ICP备18005425号-1 |