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 原生控件层级过高无法覆盖的解决方案 【跨端开发系列】
相关推荐
华子w9089258592 分钟前
基于“SpringBoot+uniapp的考研书库微信小程序设计与实现7000字论文
微信小程序·小程序·uni-app
柳中仙1 小时前
uniapp+vue3小程序分享
小程序·uni-app
烂笔头儿@2 小时前
uniapp开发小程序vendor.js 过大
小程序·uni-app
桃花岛主703 小时前
uniapp跳转到webview组件的时候,要注意:移除所有不可见字符(包括零宽空格)
uni-app
^Rocky19 小时前
uniapp 实现腾讯云IM群文件上传下载功能
uni-app·腾讯云
moxiaoran575320 小时前
uni-app学习笔记三十四--刷新和回到顶部的实现
笔记·学习·uni-app
y东施效颦21 小时前
uni-app页面发布测试环境出现连接服务器超时,点击屏幕重试解决方案
前端·javascript·vue.js·uni-app·vue
华子w9089258591 天前
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现
spring boot·微信小程序·uni-app
性野喜悲1 天前
uniapp+<script setup lang=“ts“>解决有数据与暂无数据切换显示,有数据加载时暂无数据闪现(先加载空数据)问题
uni-app
假客套1 天前
2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
微信·uni-app·旅游