一、介紹 

uni-app 是一個使用 Vue.js 開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應(yīng)用等多個平臺。

uni-app在開發(fā)者數(shù)量、案例、跨端抹平度、擴展靈活性、性能體驗、周邊生態(tài)、學(xué)習(xí)成本、開發(fā)成本等8大關(guān)鍵指標(biāo)上擁有更強的優(yōu)勢。

二、功能框架圖 

從下面 uni-app 功能框架圖可看出， uni-app 在跨平臺的過程中，不犧牲平臺特色，可優(yōu)雅的調(diào)用平臺專有能力，真正做到海納百川、各取所長。

三、前言

uniapp 官方內(nèi)置了通用的內(nèi)置的緩存組件 uni.setStorage(OBJECT) ，但是并沒有內(nèi)置緩存過期時間配置項，我們可以自行來處理實現(xiàn)。本篇內(nèi)容處理講解如何設(shè)置緩存過期時間，順便講一下滑動緩存的解決方案。

四、官方API 

4.1 uni.setStorage(OBJECT)

將數(shù)據(jù)存儲在本地緩存中指定的 key 中，會覆蓋掉原來該 key 對應(yīng)的內(nèi)容，這是一個異步接口。

HarmonyOS Next 兼容性

OBJECT 參數(shù)說明

參數(shù) HarmonyOS Next 兼容性

示例

uni.setStorage({
	key: 'storage_key',
	data: 'hello',
	success: function () {
		console.log('success');
	}
});

注意

• uni-、uni_、dcloud-、dcloud_為前綴的key，為系統(tǒng)保留關(guān)鍵前綴。如uni_deviceId、uni_id_token，請開發(fā)者為key命名時避開這些前綴。

4.2 uni.setStorageSync (KEY,DATA)

將 data 存儲在本地緩存中指定的 key 中，會覆蓋掉原來該 key 對應(yīng)的內(nèi)容，這是一個同步接口。

參數(shù)說明

try {
	uni.setStorageSync('storage_key', 'hello');
} catch (e) {
	// error
}

4.3 uni.getStorage(OBJECT)

從本地緩存中異步獲取指定 key 對應(yīng)的內(nèi)容。

HarmonyOS Next 兼容性

OBJECT 參數(shù)說明

參數(shù) HarmonyOS Next 兼容性

GetStorageSuccess 的屬性值

success 返回參數(shù)說明

示例

uni.getStorage({
	key: 'storage_key',
	success: function (res) {
		console.log(res.data);
	}
});

4.4 uni.getStorageSync(KEY)

從本地緩存中同步獲取指定 key 對應(yīng)的內(nèi)容。

HarmonyOS Next 兼容性

參數(shù)說明

參數(shù) HarmonyOS Next 兼容性

示例

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

五、自定義過期時間

通過上面的官方API文檔也看到了，并沒有緩存過期時間配置項。那我們自己寫一個吧。核心原理就是將緩存值改成 object ，然后將時間戳一并存入緩存，下次使用時先判斷下時間戳是否過期。

以下是一個示例，展示如何設(shè)置緩存并在一定時間后過期：

// 設(shè)置緩存
function setCache(key, value, expireSeconds) {
  const currentTime = Date.now();
  const expireTime = currentTime + expireSeconds * 1000; // 轉(zhuǎn)換為毫秒
  uni.setStorage({
    key: key,
    data: {
      value: value,
      expireTime: expireTime
    },
    success: function() {
      console.log('緩存設(shè)置成功');
    }
  });
}
 
// 獲取緩存
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

六、滑動緩存解決方案

首先聲明，在前端做數(shù)據(jù)緩存是 不可控的 ，也就是說 不能保證 數(shù)據(jù)的 實時性 。這種場景只適用于那些不經(jīng)常變動、實時性要求不高的數(shù)據(jù)緩存。

大致流程如下：

1）先判斷數(shù)據(jù)是否已緩存，如果已緩存再判斷緩存是否過期，如果未過期則返回緩存數(shù)據(jù)，同時異步拉取api接口數(shù)據(jù)并做 異步緩存 。

2）如果緩存不存在則同步拉取api接口數(shù)據(jù)，順便執(zhí)行 異步緩存 操作。

3）讀取緩存時要使用 同步緩存 讀取，以保證后續(xù)業(yè)務(wù)的調(diào)用。

4）緩存需要設(shè)置 過期時間 ，至于過期時間設(shè)置多久根據(jù)你業(yè)務(wù)需求。

以上就是uni-app設(shè)置緩存過期時間的操作方法的詳細(xì)內(nèi)容，更多關(guān)于uni-app設(shè)置緩存過期時間的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論