前言

• 好，經過上個章節的介紹完畢之后，給大家補充了一下 uni-app-數據傳遞的內容
• 那么補充了 uni-app-數據傳遞的內容之后，這篇文章來給大家介紹一下 uni-app-數據緩存

搭建項目

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

步入正題

• 首先我們先來看一下 uni-app-數據緩存的 API
• 官方文檔：https://uniapp.dcloud.net.cn/api/storage/storage.html
• 介紹方向大致就是新增，獲取，刪除，清空，清空所有（分為異步與同步操作）

新增

• 新增的話，我們可以通過 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

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

總結

以上是生活随笔為你收集整理的【UniApp】-uni-app-数据缓存的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。