终版:cache.js
/**
* 存储数据
* key: 缓存的键名,必填
* value: 缓存的值,选填
*
* when: 缓存的过期时间,选填:
* 【1】传入具体秒数时(单位必须为秒),到期后清除;
* 【2】传入单词 forever时,永不清除;
* 【3】传其他值或不传值时,App关闭时清除;
*/
function set(key, value, when) {
if (!key) { // 如果key为空,直接返回
console.log("key不能空");
return;
}
const valueObj = {
value: value,
storageExpire: '',
}
if (when == 'forever') { //永久存储
valueObj.storageExpire = 'forever';
} else if (!isNaN(Number.parseFloat(when))) { //规定时间后过期
const timestamp = Date.parse(new Date()) / 1000; // 获取当前时间戳,单位为秒
valueObj.storageExpire = timestamp + Number.parseFloat(when)
} else { //临时存储-App关闭后过期
valueObj.storageExpire = 'temporary'
}
uni.setStorageSync(key, valueObj);
}
/**
* 获取数据
* key: 缓存的键名,必填
*/
function get(key) {
if (!key) { // 如果key为空,直接返回
console.log("key不能空");
return;
}
const res = uni.getStorageSync(key) || '';
const when = res?.storageExpire || '';
let final = ''
if (when == 'forever') { //永久存储
final = res?.value || ''
} else if (!isNaN(Number.parseFloat(when))) { //规定时间后过期
const timestamp = Date.parse(new Date()) / 1000; // 获取当前时间戳,单位为秒
if (timestamp >= Number.parseFloat(when)) { //已过期
remove(key);
final = ''
} else { //未过期
final = res?.value || ''
}
} else if (when == 'temporary') { //临时存储
final = res?.value || ''
} else { //其他情况(例如获取通过uni.seStorageSync存储的值)
final = res || ''
}
return final
}
/**
* 移除数据
* key: 缓存的键名,必填
*/
function remove(key) {
if (!key) { // 如果key为空,直接返回
console.log("key不能空");
return;
}
uni.removeStorageSync(key);
}
/**
* 移除所有临时数据(此方法需要在App.vue里调用)
*/
function removeAllTempData() {
const list = uni.getStorageInfoSync().keys || []
for (let item of list) {
let res = uni.getStorageSync(item) || ''
if (res?.storageExpire == 'temporary') { //判断是否为临时数据
remove(item)
}
}
}
export default {
set,
get,
remove,
removeAllTempData,
}
如何使用
<script>
import handleCache from "@/utils/cache/cache.js" //先引入方法
//【注意】虽然基于uni.setStorageSync等方法改写,但是由于数据结构不同,原生存储API与handleCache方法最好不要混用
// 规定时间后过期
handleCache.set('a', { s1: { b1: 6, b2: 8 }, s2: 9 }, 10) //可直接存储对象等,无需转格式
handleCache.set('a', '时效', 10) //10秒后过期
handleCache.set('a', '时效', 3600 * 24 * 7) //7天后过期
// 永久存储
handleCache.set('b', '永久', 'forever')
// 临时存储-App关闭时清除
handleCache.set('c', '临时') //可以不传值
handleCache.set('c', '临时', 'abcde') //可以是NaN(Not a Number非数)的任意值
handleCache.get('a') //获取某个数据数据
handleCache.remove('a') //移除某个数据
// 在App.vue里的
// import handleCache from "@/utils/cache/cache.js"
// export default {
// onLaunch() {
// handleCache.removeAllTempData() //移除所有临时数据
// },
// }
</script>
附 原始版本(仅参考用)
// 缓存函数,设置或获取缓存值,带有过期时间戳
function cache(key, value, seconds) {
// key: 缓存的键名,必填
// value: 缓存的值,选填,如果为空则表示获取缓存,如果不为空则表示设置缓存
// seconds: 缓存的过期时间,选填,单位为秒,默认为28天
// 如果key为空,直接返回
if (!key) {
// console.log("key不能空");
return;
}
// 获取当前时间戳,单位为秒
const timestamp = Date.parse(new Date()) / 1000;
// console.log(`${timestamp}===${key}`);
// 如果value为空,表示获取缓存
if (value === null) {
// 获取缓存值,并按照"|a|n|d|"分割成数组
const val = uni.getStorageSync(key) || '';
const tmp = val.split("|a|n|d|");
// 如果数组的第二个元素不存在或者小于等于当前时间戳,表示缓存已过期,删除缓存并返回空字符串
if (!tmp[1] || timestamp >= tmp[1]) {
// console.log("key已失效");
uni.removeStorageSync(key);
return "";
}
// 否则表示缓存未过期,返回数组的第一个元素,即缓存值
else {
// console.log("key未失效");
return tmp[0];
}
}
// 如果value不为空,表示设置缓存
else {
// 如果seconds为空,则使用默认值28天,否则使用传入的值
const expire = seconds ? timestamp + seconds : timestamp + 3600 * 24 * 28;
// 将缓存值和过期时间戳用"|a|n|d|"连接成一个字符串,并存入缓存
value = `${value}|a|n|d|${expire}`;
uni.setStorageSync(key, value);
}
}