Vue中 引入使用 js-cookie

本文涉及的产品
.cn 域名,1个 12个月
简介: Vue中 引入使用 js-cookie

1. js-cookie 安装及引入

js-cookie 是关于 cookie 存储的一个js的API,根据官网描述其优点有:适用所有浏览器、接受任何字符、经过任何测试没什么 bug、支持 CMD 和 CommonJS、压缩之后非常小,仅900个字节。

js-cookie npm地址

npm install js-cookie --save

全局引入 (本文第2点以下均以全局引入为例)

// main.js
import jsCookie from 'js-cookie'
Vue.prototype.$cookie = jsCookie;  // 在页面里可直接用 this.$cookie 调用

按需引入

// http.js
import Cookies from 'js-cookie';
Cookies.set('key', 'value');
console.log(Cookies.get('key')); // value

2. 存储(设置) cookie

this.$cookie.set('key', 'value');
// 为 /about 路径设置了一个有效期为 7 天的cookie
this.$cookie.set('name', 'about', { expires: 7});

如上, 第三个参数是个对象, 可设置需要的 cookie 的属性

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

3. 获取 cookie

// 获得某个cookie
this.$cookie.get('key'); // value
// 获得所有的cookie
this.$cookie.get(); // { key: "value", name: "about"}
// 获得 xxx.xxxx.com 域下的 cookie
this.$cookie.get('name', { domain: 'xxx.xxxx.com' })

4. 删除 cookie

this.$cookie.remove('key');
// 如果值设置了路径,则不能用简单的 remove 方法删除值,需在 remove 时指定路径
this.$cookie.set('id', '123456', { path: '' });
this.$cookie.remove('id');  // 删除失败
this.$cookie.remove('id', { path: '' });  // 删除成功

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

5. JSON 用法

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

this.$cookie.set('name', { key1: 'value1' });
console.log( JSON.parse(this.$cookie.get('name')) ); // { key1: "value1"}
console.log( this.$cookie.get() ); // { name: '{"key1":"value1"}' }

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

this.$cookie.set('name', { key1: 'value1' });
console.log( this.$cookie.getJSON('name') ); // { key1 : "value1" }
console.log( this.$cookie.getJSON() ); // { name: { key1 :"value1" } }

6. 自定义覆盖

通过 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);
  }
});
console.log( cookiesNew .get('escaped') ); // 北
console.log( cookiesNew .get('default') ); // 北
console.log( cookiesNew .get() ); // { escaped: '北', default: '北' }

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

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





相关文章
|
19天前
|
开发框架 前端开发 JavaScript
在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表
在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表
|
4天前
|
JSON JavaScript 前端开发
JavaScript 详解——Vue基础
【8月更文挑战第16天】
14 3
JavaScript 详解——Vue基础
|
1月前
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
73 0
|
4天前
|
JavaScript 前端开发
解决在JS中阻止定时器“重复”开启问题、Vue中定时器的使用
这篇文章讨论了在JavaScript和Vue中如何避免定时器重复开启的问题,并提供了一个模拟场景和代码示例,演示了在开启新定时器前清除旧定时器的方法。
解决在JS中阻止定时器“重复”开启问题、Vue中定时器的使用
|
11天前
|
JavaScript
Vue进阶篇(二)-彻底改变 Vue.js 状态管理:深入探讨Vue 3 Setup中的DefineModel
Vue进阶篇(二)-彻底改变 Vue.js 状态管理:深入探讨Vue 3 Setup中的DefineModel
|
19天前
|
开发框架 前端开发 JavaScript
在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理
在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理
|
4天前
|
JavaScript 前端开发 API
vue中将验证表单输入框的方法写在一个js文件中(表达式验证邮箱、身份证、号码、两次输入的密码是否一致)
这篇文章介绍了如何在Vue框架中将表单输入验证逻辑封装到一个JavaScript文件中,并通过正则表达式验证邮箱、身份证、手机号等信息,同时确保两次密码输入的一致性。
|
1月前
|
JavaScript
网页CAD(JS Vue 预览dwg)如何二次开发常用的CAD编辑功能
```markdown # CAD网页编程概览 - 使用mxcad库,实现CAD操作如删除、复制、镜像、移动和旋转。 - `erase()`方法删除实体,`clone()`配合`transformBy()`用于复制和编辑。 - `mirror()`和`transformBy(setMirror)`执行镜像操作,基于参考线。 - `move()`和`transformBy(setToTranslation)`实现移动功能。 - `rotate()`和`transformBy(setToRotation)`进行旋转,支持角度输入。 ```
网页CAD(JS Vue 预览dwg)如何二次开发常用的CAD编辑功能
|
7天前
|
JavaScript
VUE——使用easy-typer-js实现打字机效果
VUE——使用easy-typer-js实现打字机效果
13 0
|
7天前
|
JavaScript
Vue——使用JS文件中的函数ESLint报错未定义
Vue——使用JS文件中的函数ESLint报错未定义
18 0