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对应的value
console.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.keys
console.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.keys
allAsyncKeyValue.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.keys
allSyncKeyValue.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>原文地址：https://blog.csdn.net/weixin_74261199/article/details/143436090
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！