最近的一个切换多语言的需求中需要用到cookie来存储和取出当前语言,分享和记录一下一个比较简单处理cookie的API---------> 'js-cookie'
js-cookie是什么?
js-cookie是一个简单的,轻量级的处理cookies的API,下面是js-cookie官网的描述
使用步骤
一、安装
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类型
拿我当前代码来看
存入
// 存入有效期为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}