网站制作技术支持,哈尔滨公司建站模板,贷款网站模板,网站做啥内容用户多利用uniapp做开发时#xff0c;缓存数据是及其重要的#xff0c;下面是同步缓存和异步缓存的使用
同步缓存
在执行同步缓存时会阻塞其他代码的执行
① uni.setStorageSync(key, data)
设置缓存#xff0c;如#xff1a;
uni.setStorageSync(name, 张三)
② uni.getSt… 利用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测试缓存的代码
templateview classrootview classasyncStorageBoxview classtitletext异步缓存/text/viewview classsettextkey: /textinput typetext v-modelsetAsyncKey /textvalue: /textinput typetext v-modelsetAsyncValue/button clicksetAsyncStorage设置缓存/button/viewview classremovetextkey: /textinput typetext v-modelremoveAsyncKey/text stylevisibility: hidden;value: /textinput typetext stylevisibility: hidden;/button clickremoveAsyncStorage清除缓存/button/viewview classgettextkey: /textinput typetext v-modelgetAsyncKey/textvalue: /textinput typetext disabledfalse styleborder-style: none; v-modelgetAsyncValue/button clickgetAsyncStorage获取缓存/button/viewview classgetAllview classbutton clickgetAsyncAllStorage所有缓存/buttonbutton typewarn clickclearAsyncAllStorage清空缓存/button/viewtextarea name id cols30 rows6 disabledfalse v-modelcomputeAllAsyncKeyValue/textarea/view/viewview classsyncStorageBoxview classtitletext同步缓存/text/viewview classsettextkey: /textinput typetext v-modelsetSyncKey/textvalue: /textinput typetext v-modelsetSyncValue/button clicksetSyncStorage设置缓存/button/viewview classremovetextkey: /textinput typetext v-modelremoveSyncKey/text stylevisibility: hidden;value: /textinput typetext stylevisibility: hidden;/button clickremoveSyncStorage清除缓存/button/viewview classgettextkey: /textinput typetext v-modelgetSyncKey /textvalue: /textinput typetext disabledfalse styleborder-style: none; v-modelgetSyncValue/button clickgetSyncStorage获取缓存/button/viewview classgetAllview classbutton clickgetSyncAllStorage所有缓存/buttonbutton clickclearSyncAllStorage typewarn清空缓存/button/viewtextarea name id cols30 rows6 disabledfalse v-modelcomputeAllSyncKeyValue/textarea/view/view/view
/template
script setupimport {} from dcloudio/uni-appimport { 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 langscss.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
