Vue Cookie的使用

本文涉及的产品
.cn 域名,1个 12个月
简介: Vue Cookie的使用

最近的一个切换多语言的需求中需要用到cookie来存储和取出当前语言,分享和记录一下一个比较简单处理cookie的API--------->  'js-cookie'

js-cookie是什么?

js-cookie是一个简单的,轻量级的处理cookies的API,下面是js-cookie官网的描述

  • 适用于所有浏览器
  • 接受任何字符
  • 大量测试
  • 无依赖性
  • 支持 ES 模块
  • 支持 AMD/CommonJS...........

20210527153548522.png

使用步骤

一、安装

npm install js-cookie --save

二、全局引入 (main.js)

import Cookies from "js-cookie";

三、创建cookie (存入)

//  存入当前选择语言
Cookies.set('language', 'zh-CN');
//  存入当前选择语言的有效时间 5年
Cookies.set(
    'language', 
     'zh-CN', 
     0new Date(new Date().getTime() + 5 * 365 * 86400000) //5 Year 
);
//  存入当前选择语言的有效时间 30天
Cookies.set(
    'language',
    'zh-CN',
    { expires: 30, path:'/login' }
}

set方法支持的属性

expires

定义有效期。如果传入Number,那么单位为天,你也可以传入一个Date对象,表示有效期至Date指定时间。默认情况下cookie有效期截止至用户退出浏览器。


path

string,表示此cookie对哪个地址可见。默认为”/”。


domain

string,表示此cookie对哪个域名可见。设置后cookie会对所有子域名可见。默认为对创建此cookie的域名和子域名可见。


secure

true或false,表示cookie传输是否仅支持https。默认为不要求协议必须为https。

四、取出

Cookies.get('language');  // zh-CN

五、移除Cookie

Cookies.remove('language');
//如果值设置了路径,那么不能用简单的delete方法删除值,需要在delete时指定路径
Cookies.set('language', 'zh-CN', { path: '/login' });
Cookies.remove('language'); // 删除失败
Cookies.remove('language', { path: '' }); // 删除成功
//注意,删除不存在的cookie不会报错也不会有返回

六、Cookie存入JSON类型

拿我当前代码来看

20210527153548522.png

存入

// 存入有效期为30天的 JSON格式cookie
Cookie.set(
    'language',
    JSON.stringify(language),
    { expires: 30 }
);
或者
Cookies.set(
    'language',
    languageDetails,
    { expires: 30}
)

取出

//  取出JSON 格式cookie
let currentLanguage = JSON.parse(Cookies.get('language'));
// 或者
Cookies.getJSON('language');  //  { name:'zh-CN', icon:'cn', id:1}
console.log(currentLanguage);  // { name:'zh-CN', icon:'cn', id:1}

官网地址:https://www.npmjs.com/package/js-cookie

相关文章
|
2天前
|
JavaScript
|
4天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
16 6
|
1天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
10 2
|
4天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
15 4
|
4天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
10 1
|
4天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
15 1
|
4天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
11 0
|
4天前
|
JavaScript 前端开发 数据安全/隐私保护
【vue】自定义指令实现 复制、长按、水印 功能
【vue】自定义指令实现 复制、长按、水印 功能
9 0
|
4天前
|
JavaScript
【vue】图片懒加载 vue-lazyload 使用
【vue】图片懒加载 vue-lazyload 使用
8 0
|
4天前
|
JavaScript
【vue】 vue如何根据不同路由地址更改页面的标题
【vue】 vue如何根据不同路由地址更改页面的标题
5 0