本文详细介绍如何在uni-app中实现缓存过期时间，通过修改存储对象结构并记录时间戳解决原生API不支持过期的问题。同时提供滑动缓存解决方案，结合异步拉取与同步读取，在不牺牲实时性的前提下优化数据获取体验，适用于对实时性要求不高的场景。
一、介绍
uni-app 是基于 Vue.js 构建的全栈前端框架，允许开发者编写一套代码，并部署至 iOS、Android、Web（响应式）以及微信、支付宝、百度、头条、飞书、QQ、快手、钉钉、淘宝等多个平台的小程序和快应用。
在开发者规模、案例丰富度、跨平台一致性、扩展灵活性、性能表现、生态完善度、学习门槛及开发成本等八大核心指标上，uni-app 展现出显著优势。
二、功能框架图
从 uni-app 功能框架图可以看出，uni-app 在跨平台开发过程中并未牺牲各平台的原生特性，而是能够优雅地调用平台专属能力，真正实现了兼容并蓄、各取所长的设计理念。
三、前言
uniapp 官方提供了通用的内置缓存组件 uni.setStorage(OBJECT)，但该接口并未内置缓存过期时间的配置项，因此需要开发者自行处理以实现此功能。本文将详细讲解如何设置缓存过期时间，并介绍一种滑动缓存的解决方案。
四、官方API
4.1 uni.setStorage(OBJECT)
该方法用于将数据存储在本地缓存中指定的 key 中，若该 key 已存在则会被覆盖，这是一个异步接口。
HarmonyOS Next 兼容性
| HarmonyOS Next |
|---|
| HBuilderX 4.23 |
OBJECT 参数说明
| 参数名 | 类型 | 必填 | 说明 |
|---|
| key | String | 是 | 本地缓存中的指定的 key |
| data | Any | 是 | 需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象 |
| success | Function | 否 | 接口调用成功的回调函数 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
参数 HarmonyOS Next 兼容性
| 名称 | HarmonyOS Next 兼容性 |
|---|
| options | - |
| 名称 | HarmonyOS Next 兼容性 |
|---|
| key | - | | data | - | | success | - | | fail | - | | complete | - |
示例
uni.setStorage({
key: 'storage_key',
data: 'hello',
success: function () {
console.log('success');
}
});
注意
- 以
uni-、uni_、dcloud-、dcloud_ 为前缀的 key 属于系统保留的关键前缀。例如 uni_deviceId、uni_id_token，建议开发者在命名 key 时避开这些前缀。
4.2 uni.setStorageSync (KEY,DATA)
该方法用于将 data 存储在本地缓存中指定的 key 中，若该 key 已存在则会被覆盖，这是一个同步接口。
参数说明
| 参数 | 类型 | 必填 | 说明 |
|---|
| key | String | 是 | 本地缓存中的指定的 key | | data | Any | 是 | 需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象 |
try {
uni.setStorageSync('storage_key', 'hello');
} catch (e) {
// error
}
4.3 uni.getStorage(OBJECT)
该方法用于从本地缓存中异步获取指定 key 对应的内容。
HarmonyOS Next 兼容性
| HarmonyOS Next |
|---|
| HBuilderX 4.23 |
OBJECT 参数说明
| 参数名 | 类型 | 必填 | 说明 |
|---|
| key | String | 是 | 本地缓存中的指定的 key | | success | Function | 是 | 接口调用的回调函数，res = {data: key对应的内容} | | fail | Function | 否 | 接口调用失败的回调函数 | | complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
参数 HarmonyOS Next 兼容性
| 名称 | HarmonyOS Next 兼容性 |
|---|
| options | - | | 名称 | HarmonyOS Next 兼容性 |
|---|
| key | - | | success | - | | fail | - | | complete | - |
GetStorageSuccess 的属性值
| 名称 | HarmonyOS Next 兼容性 |
|---|
| data | - |
success 返回参数说明
示例
uni.getStorage({
key: 'storage_key',
success: function (res) {
console.log(res.data);
}
});
4.4 uni.getStorageSync(KEY)
该方法用于从本地缓存中同步获取指定 key 对应的内容。
HarmonyOS Next 兼容性
| HarmonyOS Next |
|---|
| HBuilderX 4.23 |
参数说明
| 参数 | 类型 | 必填 | 说明 |
|---|
| key | String | 是 | 本地缓存中的指定的 key |
参数 HarmonyOS Next 兼容性
示例
try {
const value = uni.getStorageSync('storage_key');
if (value) {
console.log(value);
}
} catch (e) {
// error
}
五、自定义过期时间
通过上述官方 API 文档可以看出，原生接口并未提供缓存过期时间的配置项。因此，我们可以自行封装实现。其核心原理是将缓存值修改为 object 类型，并将时间戳一并存入缓存，下次使用时先判断时间戳是否已过期。
以下是一个示例，展示如何设置缓存并在一定时间后过期：
// 设置缓存
function setCache(key, value, expireSeconds) {
const currentTime = Date.now();
const expireTime = currentTime + expireSeconds * 1000; // 转换为毫秒
uni.setStorage({
key: key,
data: {
value: value,
expireTime: expireTime
},
success: function() {
console.log('缓存设置成功');
}
});
}
// 获取缓存
function getCache(key) {
const res = uni.getStorageSync(key);
if (res && res.expireTime > Date.now()) {
return res.value;
} else {
uni.removeStorage({
key: key,
success: function() {
console.log('缓存已过期，已移除');
}
});
return null; // 缓存过期，返回null
}
}
// 使用示例
const key = 'myCacheKey';
const value = 'myCacheValue';
const expireSeconds = 30; // 缓存30秒
setCache(key, value, expireSeconds);
// 稍后获取缓存
const cachedValue = getCache(key);
console.log(cachedValue); // 缓存过期时会打印null
六、滑动缓存解决方案
首先声明，在前端进行数据缓存具有不可控性，即无法保证数据的实时性。因此，这种场景仅适用于那些不经常变动、对实时性要求不高的数据缓存场景。
大致流程如下：
1）先判断数据是否已缓存，如果已缓存再判断缓存是否过期，如果未过期则返回缓存数据，同时异步拉取 api 接口数据并做异步缓存。
2）如果缓存不存在则同步拉取 api 接口数据，顺便执行异步缓存操作。
3）读取缓存时要使用同步缓存读取，以保证后续业务的调用。
4）缓存需要设置过期时间，至于过期时间设置多久根据你业务需求。
以上就是uni-app设置缓存过期时间的操作方法的详细内容，更多关于uni-app设置缓存过期时间的资料请关注本站其它相关文章！ |
|
