我要评论js-cookie用法详解
1. 安装
npm install js-cookie import cookies from "js-cookie";
2. 引入
import cookies from "js-cookie";
3. 使用
（1）cookie在当前组件的使用
// 写入cookie
cookies.set('name', 'value')
// 读取
cookies.get('name') // => 'value'
cookies.get('nothing') // => undefined
// 读取所有可见的cookie
cookies.get()
// 删除某项cookie值
cookies.remove('name')（2）cookie在全局使用
在main.js引入 import cookies from "js-cookie";
4. 设置过期时间
//1、存cookie
/*
set方法支持的属性有 ： expires->过期时间
path->设置为指定页面创建cookie
domain-》设置对指定域名及指定域名的子域名可见
secure->值有false和true,表示设置是否只支持https,默认是false
*/
//创建简单的cookie
cookies.set('key', 'value');
//创建有效期为27天的cookie
cookies.set('key', 'value', { expires: 27 });
//可以通过配置path,为当前页创建有效期7天的cookie
cookies.set('key', 'value', { expires: 17, path: '' });
//2、取cookie
// 获取指定key 对应的value
cookies.get('key');
//获取所有value
cookies.get();
//3、删除cookie
//删除普通的cookie
cookies.remove('key');
// 删除存了指定页面path的cookie
cookies.remove('name', { path: '' });注意：如果存的是对象，如： userinfo = {age:111,score:90}; cookie.set('userinfo',userinfo)
取出来的userinfo需要进行json的解析,解析为对象：let res = json.parse( cookie.get('userinfo') );
当然你也可以使用：cookie.getjson('userinfo');
cookies.get('name'); // => '{"myname":"bo"}'
cookies.get(); // => { name: '{"myname":"bo"}' }
//-------------------------------------------------------//
cookies.getjson('name'); // => { myname: 'bo' }
cookies.getjson(); // => { name: { myname: 'bo' } }使用场景
业务需要在前端进行数据的缓存，到期就删除再进行获取新数据。
前端设置数据定时失效的可以有下面2种方法：
1、当数据较大时，可以利用localstorage，存数据时候写入一个时间，获取的时候再与当前时间进行比较
2、如果数据不超过cookie的限制大小，可以利用cookie比较方便，直接设置有效期即可。
1. 使用 localstorage
（1）设置过期时间
在存储时加上时间戳，可以写个公共方法
//export抛出
export function setlocalstorageandtime (key, value) {
window.localstorage.setitem(key, json.stringify({ data: value, time: new date().gettime() }))
}获取时与当前时间戳进行比较
export function getlocalstorageandtime (key, exp = 86400000) {
// 获取数据
let data = window.localstorage.getitem(key)
if (!data) return null
let dataobj = json.parse(data)
// 与过期时间比较
if (new date().gettime() - dataobj.time > exp) {
// 过期删除返回null
removelocalstorage(key)
console.log('信息已过期')
return null
} else {
return dataobj.data
}
}（2）使用方法
存储
setlocalstorageandtime('xxx', {name: 'xxx'})
判断是否返回为null或者失效
getlocalstorageandtime('xxx', 86400000)1. 使用 cookie
js-cookie 的示例中只有以天为单位的有效期：
cookies.set('name', 'value', { expires: 7 }); // 7 天后失效官方只支持天数，封装一下支持时分秒
let seconds = 10;
let expires = new date(new date() * 1 + seconds * 1000);
cookies.set('username', 'tanggaowei', { expires: expires }); // 10 秒后失效封装
import cookies from 'js-cookie'
/*
* 设置cookies
* */
export function getcookies (key) {
return cookies.get(key)
}
/*
* 设置cookies
* */
export function setcookies (key, value, expirestime) {
let seconds = expirestime
let expires = new date(new date() * 1 + seconds * 1000)
return cookies.set(key, value, { expires: expires })
}
/*
* 移除cookies
* */
export function removecookies (key) {
return cookies.remove(key)
}ps: cookie.set()更多参数
语法： cookies.set（名称，[值]，[options]）
更多options的参数配置：
maxage：一个数字，表示自date.now()到期起的毫秒数 expires：一个date对象，指示cookie的过期日期（默认在会话结束时过期）。默认：天 path：一个字符串，指示cookie的路径（/默认情况下）。 domain：一个字符串，指示cookie的域（无默认值）。 secure：一个布尔值，指示cookie是否仅通过https发送 （false默认情况下，对于http，true默认情况下，对于https）。在下面阅读有关此选项的更多信息。 httponly：一个布尔值，指示cookie是否仅通过http（s）发送， 并且不提供给客户端javascript（true默认情况下）。 samesite：布尔值或字符串，指示cookie是“相同站点” cookie（false默认情况下）。 可以将其设置为'strict'，‘lax'或true（映射到'strict'）。 signed：一个布尔值，指示是否要对cookie进行签名（false默认情况下）。 如果为真，.sig则还将发送另一个具有后缀的同名cookie， 其27字节的url安全base64 sha1值表示针对第一个keygrip密钥的cookie-name=cookie-value的哈希值。 此签名密钥用于检测下次接收cookie时的篡改。 overwrite：一个布尔值，指示是否覆盖以前设置的同名cookie（false默认情况下）。 如果是这样，则在设置此cookie时，将从相同名称的同一个请求中设置的所有cookie （无论路径或域如何）都从set-cookie标头中过滤掉。
到此这篇关于js设置缓存和缓存过期时间的文章就介绍到这了,更多相关js设置缓存和缓存过期时间内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论