设置缓存和缓存过期时间

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标头中过滤掉。