uniapp数据缓存

 利用uniapp做开发时，缓存数据是及其重要的，下面是同步缓存和异步缓存的使用

同步缓存

在执行同步缓存时会阻塞其他代码的执行

① uni.setStorageSync(key, data)

设置缓存，如：

uni.setStorageSync('name', '张三')

② uni.getStorageSync(key)

获取缓存，如：

uni.getStorageSync('name')

③ uni.removeStorageSync(key)

移除缓存，如：

uni.removeStorageSync('name')

④ uni.clearStorageSync()

清空所有缓存，如：

uni.clearStorageSync()

⑤ uni.getStorageInfoSync()

获取缓存更详细的信息，正如缓存中所有的key，如：

let res = uni.getStorageInfoSync()
//  取出缓存中所有的key，数组形式，如['name','age', ...]
let allStorageKeys = res.keys

异步缓存

异步缓存不会阻塞代码的执行，但是需要利用回调的特点，即执行成功之后要执行的代码放success中，失败的代码放fail中，一定要执行的代码放complete中

① uni.setStorage(OBJECT)

设置缓存，如：

uni.setStorage({key: 'name',data: '张三'
})

② uni.getStorage(OBJECT)

获取缓存，如：

uni.getStorage({key: 'name',success: (storage) => {//  获取key对应的valueconsole.log('value: ', storage.data)}
})

③ uni.removeStorage(OBJECT)

移除缓存，如：

uni.removeStorage({key: removeAsyncKey.value
})

④ uni.clearStorage()

清空所有缓存，如：

uni.clearStorage()

⑤ uni.getStorageInfo(OBJECT)

获取缓存更详细的信息，正如缓存中所有的key，如：

uni.getStorageInfo({success: (res) => {//  取出缓存中所有的key，数组形式，如['name','age', ...]let allStorageKeys = res.keysconsole.log(allStorageKeys)}
})

uniapp案例

页面如下：

以下是用Vue3语法写的uniapp测试缓存的代码

<template><view class="root"><view class="asyncStorageBox"><view class="title"><text>异步缓存</text></view><view class="set"><text>key: </text><input type="text" v-model="setAsyncKey" /><text>value: </text><input type="text" v-model="setAsyncValue"/><button @click="setAsyncStorage">设置缓存</button></view><view class="remove"><text>key: </text><input type="text" v-model="removeAsyncKey"/><text style="visibility: hidden;">value: </text><input type="text" style="visibility: hidden;"/><button @click="removeAsyncStorage">清除缓存</button></view><view class="get"><text>key: </text><input type="text" v-model="getAsyncKey"/><text>value: </text><input type="text" disabled="false" style="border-style: none;" v-model="getAsyncValue"/><button @click="getAsyncStorage">获取缓存</button></view><view class="getAll"><view class=""><button @click="getAsyncAllStorage">所有缓存</button><button type="warn" @click="clearAsyncAllStorage">清空缓存</button></view><textarea name="" id="" cols="30" rows="6" disabled="false" v-model="computeAllAsyncKeyValue"></textarea></view></view><view class="syncStorageBox"><view class="title"><text>同步缓存</text></view><view class="set"><text>key: </text><input type="text" v-model="setSyncKey"/><text>value: </text><input type="text" v-model="setSyncValue"/><button @click="setSyncStorage">设置缓存</button></view><view class="remove"><text>key: </text><input type="text" v-model="removeSyncKey"/><text style="visibility: hidden;">value: </text><input type="text" style="visibility: hidden;"/><button @click="removeSyncStorage">清除缓存</button></view><view class="get"><text>key: </text><input type="text" v-model="getSyncKey" /><text>value: </text><input type="text" disabled="false" style="border-style: none;" v-model="getSyncValue"/><button @click="getSyncStorage">获取缓存</button></view><view class="getAll"><view class=""><button @click="getSyncAllStorage">所有缓存</button><button @click="clearSyncAllStorage" type="warn">清空缓存</button></view><textarea name="" id="" cols="30" rows="6" disabled="false" v-model="computeAllSyncKeyValue"></textarea></view></view></view>
</template>
​
<script setup>import {} from '@dcloudio/uni-app'import { computed, ref } from 'vue';//  异步缓存数据const setAsyncKey = ref('')const setAsyncValue = ref('')const removeAsyncKey = ref('')const getAsyncKey = ref('')const getAsyncValue = ref('')const allAsyncKeyValue = ref({})const computeAllAsyncKeyValue = computed(() => JSON.stringify(allAsyncKeyValue.value))/*** 异步缓存key、value*/function setAsyncStorage() {uni.setStorage({key: setAsyncKey.value,data: setAsyncValue.value})}/*** 异步获取数据*/function getAsyncStorage() {uni.getStorage({key: getAsyncKey.value,success: (storage) => {getAsyncValue.value = storage.data}})}/*** 异步清除缓存*/function removeAsyncStorage() {uni.removeStorage({key: removeAsyncKey.value})}/*** 异步清空所有缓存*/function clearAsyncAllStorage() {uni.clearStorage()}/*** 异步查询出所有缓存*/function getAsyncAllStorage() {uni.getStorageInfo({success: (res) => {let allStorageKeys = res.keysallAsyncKeyValue.value = {}for (let k of allStorageKeys) {uni.getStorage({key: k,success: (storage) => {allAsyncKeyValue.value[k] = storage.data}})}}})}//  同步缓存数据const setSyncKey = ref('')const setSyncValue = ref('')const removeSyncKey = ref('')const getSyncKey = ref('')const getSyncValue = ref('')const allSyncKeyValue = ref({})const computeAllSyncKeyValue = computed(() => JSON.stringify(allSyncKeyValue.value))/*** 同步缓存key、value*/function setSyncStorage() {uni.setStorageSync(setSyncKey.value, setSyncValue.value)}/*** 同步获取数据*/function getSyncStorage() {getSyncValue.value = uni.getStorageSync(getSyncKey.value)}/*** 同步清除缓存*/function removeSyncStorage() {uni.removeStorageSync(removeSyncKey.value)}/*** 同步清空所有缓存*/function clearSyncAllStorage() {uni.clearStorageSync()}/*** 同步查询出所有缓存*/function getSyncAllStorage() {let res = uni.getStorageInfoSync()console.log(res)let allStorageKeys = res.keysallSyncKeyValue.value = {}for (let k of allStorageKeys) {allSyncKeyValue.value[k] = uni.getStorageSync(k)}}</script>
​
<style lang="scss">.root {display: flex;flex-direction: column;.asyncStorageBox{display: flex;flex-direction: column;border: 1px solid black;margin-bottom: 20rpx;}.syncStorageBox{display: flex;flex-direction: column;border: 1px solid black;}.title {text-align: center;font-weight: bold;}.set {display: flex;flex-direction: row;input {margin-left: 20rpx;width: 150rpx;padding-left: 10rpx;border: 1px dotted #aaa;}button {height: 70rpx;line-height: 70rpx;margin-top: -10rpx;}margin: 30rpx 0;}.getAll{display: flex;margin-bottom: 20rpx;textarea {border: 1px solid black;width: 60%;margin-left: 50rpx;}button {height: 100rpx;margin-bottom: 50rpx;}}.get {display: flex;flex-direction: row;input {margin-left: 20rpx;width: 150rpx;padding-left: 10rpx;border: 1px dotted #aaa;}button {height: 70rpx;line-height: 70rpx;margin-top: -10rpx;}margin: 30rpx 0;}.remove {display: flex;flex-direction: row;input {margin-left: 20rpx;width: 150rpx;padding-left: 10rpx;border: 1px dotted #aaa;}button {height: 70rpx;line-height: 70rpx;margin-top: -10rpx;}margin: 30rpx 0;}}
</style>