【UniApp】-uni-app-資料快取

BNTang發表於2023-12-17
APP快取

前言

  • 好，經過上個章節的介紹完畢之後，給大家補充了一下 uni-app-資料傳遞的內容
  • 那麼補充了 uni-app-資料傳遞的內容之後，這篇文章來給大家介紹一下 uni-app-資料快取

搭建專案

  • 首先我們還是要先搭建一個專案，這裡我就不多說了，大家可以參考上一篇文章
  • 搭建好專案之後，我們就可以開始我們的正文了

步入正題

新增

  • 新增的話，我們可以透過 uni.setStorage(OBJECT) 來進行新增
  • 新增的話，我們可以透過 uni.setStorageSync(KEY,DATA) 來進行新增
  • 兩者的區別就是一個是非同步，一個是同步，帶有 Sync 的就是同步的，不帶有 Sync 的就是非同步的
  • 兩者的引數不一樣，一個是傳遞一個物件，一個是傳遞兩個引數

好了，下面我們來看一下具體的使用, 首先看同步，程式碼如下：

<template>
	<view>
		<text>{{ name }}</text>
		<button type="primary" @click="add">新增</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "BNTang"
			}
		},
		onLoad() {},
		methods: {
			add() {
				try {
					uni.setStorageSync('name', 'king');
				} catch (e) {
					// error
				}
			}
		}
	}
</script>

執行測試效果：

好了，下面我們來看一下非同步，程式碼如下：

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

執行測試效果：

獲取

  • 獲取的話，我們可以透過 uni.getStorage(OBJECT) 來進行獲取
  • 獲取的話，我們可以透過 uni.getStorageSync(KEY) 來進行獲取

看一下具體的使用, 首先看同步，程式碼如下：

<button type="primary" @click="get">獲取</button>

get() {
    try {
        this.name = uni.getStorageSync('name');
    } catch (e) {
        // error
    }
}

執行測試效果：

來看一下非同步，程式碼如下：

get() {
    const that = this
    uni.getStorage({
        key: 'name',
        success: function(res) {
            that.name = res.data
        }
    });
}

執行測試效果：

刪除

  • 刪除的話，我們可以透過 uni.removeStorage(OBJECT) 來進行刪除
  • 刪除的話，我們可以透過 uni.removeStorageSync(KEY) 來進行刪除

看一下具體的使用, 首先看同步，程式碼如下：

<button type="primary" @click="del">刪除</button>

del() {
    try {
        uni.removeStorageSync('name');
    } catch (e) {
        // error
    }
}

執行測試效果：

點選刪除按鈕之後：

非同步略過，大家可以自己去試一下。

清空

  • 清空的話，我們可以透過 uni.clearStorage() 來進行清空
  • 清空的話，我們可以透過 uni.clearStorageSync() 來進行清空

看一下具體的使用, 首先看同步，程式碼如下：

<button type="primary" @click="clear">清空</button>

clear() {
    try {
        uni.clearStorageSync();
    } catch (e) {
        // error
    }
}
  • 執行測試效果，記得儲存點進去之後，再點選清空按鈕，這個就不上圖片了，大家自己去試一下
  • 非同步略過，大家可以自己去試一下

getStorageInfo

再給大家補充一個，getStorageInfo，這個 API 可以獲取當前 storage 的相關資訊，程式碼如下：

<button type="primary" @click="getStorageInfoFn">getStorageInfo</button>

getStorageInfoFn() {
    try {
        const res = uni.getStorageInfoSync();
        
        console.log(res);
        console.log(res.keys);
        console.log(res.currentSize);
        console.log(res.limitSize);
    } catch (e) {
        // error
    }
}

執行輸出結果：

  • keys：當前 storage 中所有的 key
  • currentSize：當前佔用的空間大小, 單位 kb
  • limitSize：限制的空間大小, 單位 kb
  • 非同步略過，大家可以自己去試一下

和 HTML5 的資料快取是一樣的都是放到 Storage 裡面的

End

  • 如果你有任何問題或建議，歡迎在下方留言，我會盡快回復
  • 如果你覺得本文對你有幫助，歡迎點贊、收藏，你的支援是我寫作的最大動力

相關文章