自学内容网 自学内容网

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 参数说明

参数名类型必填说明
keyString本地缓存中的指定的 key
dataAny需要存储的内容,只支持原生类型、及能够通过 JSON.stringify 序列化的对象
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

参数 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_deviceIduni_id_token,请开发者为key命名时避开这些前缀。

4.2 uni.setStorageSync (KEY,DATA)

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

参数说明

参数类型必填说明
keyString本地缓存中的指定的 key
dataAny需要存储的内容,只支持原生类型、及能够通过 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 参数说明

参数名类型必填说明
keyString本地缓存中的指定的 key
successFunction接口调用的回调函数,res = {data: key对应的内容}
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

参数 HarmonyOS Next 兼容性

名称HarmonyOS Next 兼容性
options-
名称HarmonyOS Next 兼容性
key-
success-
fail-
complete-

GetStorageSuccess 的属性值

名称HarmonyOS Next 兼容性
data-

success 返回参数说明

参数类型说明
dataAnykey 对应的内容

示例

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

参数说明

参数类型必填说明
keyString本地缓存中的指定的 key

参数 HarmonyOS Next 兼容性

名称HarmonyOS Next 兼容性
key-

示例

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


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

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

原文地址:https://blog.csdn.net/mss359681091/article/details/144345555

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!