uni-app 设置缓存过期时间【跨端开发系列】

🔗 uniapp 跨端开发系列文章:🎀🎀🎀

  1. uni-app 组成和跨端原理 【跨端开发系列】
  2. uni-app 各端差异注意事项 【跨端开发系列】
  3. uni-app 离线本地存储方案 【跨端开发系列】
  4. uni-app UI库、框架、组件选型指南 【跨端开发系列】
  5. uni-app 蓝牙开发 【特别专题】
  6. uni-app 导航栏开发指南 【跨端开发系列】
  7. uni-app 原生控件层级过高无法覆盖的解决方案 【跨端开发系列】

一、介绍 🎯

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。

uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

二、功能框架图 📋

从下面 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 -
名称

示例

javascript 复制代码
uni.setStorage({
	key: 'storage_key',
	data: 'hello',
	success: function () {
		console.log('success');
	}
});

注意

  • uni-uni_dcloud-dcloud_为前缀的key,为系统保留关键前缀。如uni_deviceIduni_id_token,请开发者为key命名时避开这些前缀。

4.2 uni.setStorageSync (KEY,DATA)

将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。

参数说明

参数 类型 必填 说明
key String 本地缓存中的指定的 key
data Any 需要存储的内容,只支持原生类型、及能够通过 JSON.stringify 序列化的对象
javascript 复制代码
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 -
名称

GetStorageSuccess 的属性值

名称 HarmonyOS Next 兼容性
data -

success 返回参数说明

参数 类型 说明
data Any key 对应的内容

示例

javascript 复制代码
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 兼容性

名称 HarmonyOS Next 兼容性
key -

示例

javascript 复制代码
try {
	const value = uni.getStorageSync('storage_key');
	if (value) {
		console.log(value);
	}
} catch (e) {
	// error
}

五、自定义过期时间 ⏱️

通过上面的官方API文档也看到了,并没有缓存过期时间配置项。那我们自己写一个吧。核心原理就是将缓存值改成 object ,然后将时间戳一并存入缓存,下次使用时先判断下时间戳是否过期。

以下是一个示例,展示如何设置缓存并在一定时间后过期:

javascript 复制代码
// 设置缓存
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)缓存需要设置 过期时间 ,至于过期时间设置多久根据你业务需求。


🔗 uniapp 跨端开发系列文章:🎀🎀🎀

  1. uni-app 组成和跨端原理 【跨端开发系列】
  2. uni-app 各端差异注意事项 【跨端开发系列】
  3. uni-app 离线本地存储方案 【跨端开发系列】
  4. uni-app UI库、框架、组件选型指南 【跨端开发系列】
  5. uni-app 蓝牙开发 【特别专题】
  6. uni-app 导航栏开发指南 【跨端开发系列】
  7. uni-app 原生控件层级过高无法覆盖的解决方案 【跨端开发系列】
相关推荐
anyup2 小时前
快崩溃了!华为应用商店已经 4 次驳回我的应用上线
前端·华为·uni-app
alphaair9 小时前
【一步步开发AI运动APP】十、微调优化内置运动分析器,灵活适配不同的应用场景
uni-app·ai运动·ai运动识别·ai健身·ai体测·ai运动app·ai运动检测·工会云上运动会·ai人体检测·ai姿态识别
moxiaoran575311 小时前
uni-app学习笔记二十三--交互反馈showToast用法
笔记·学习·uni-app
Angindem20 小时前
从零搭建uniapp项目
前端·vue.js·uni-app
Bug从此不上门1 天前
【无标题】
前端·javascript·uni-app·vue
耶啵奶膘1 天前
uniapp+vue2解构赋值和直接赋值的优缺点
uni-app
疯狂的沙粒1 天前
uni-app 项目支持 vue 3.0 详解及版本升级方案?
前端·vue.js·uni-app
Jiaberrr1 天前
uniapp Vue2 获取电量的独家方法:绕过官方插件限制
前端·javascript·uni-app·plus·电量
^Rocky1 天前
uniapp 对接腾讯云IM群公告功能
uni-app·腾讯云
段旭涛1 天前
uniapp 设置手机不息屏
前端·uni-app