当前位置： 首页 > article >正文

uniapp数据缓存

article 2024/9/30 15:13:31

利用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>


http://www.kler.cn/news/326176.html

相关文章：

  • golang学习笔记20-面向对象（二）：方法与结构体【重要】
  • React和Vue对比
  • Oracle数据库物理结构操作管理
  • kubeadm部署k8s集群，版本1.23.6；并设置calico网络BGP模式通信，版本v3.25--未完待续
  • C++ STL（1）迭代器
  • Kafka 在 Linux 下的集群配置和安装
  • 生产k8s 应用容器内存溢出OOMKilled问题处理
  • Ubuntu 镜像替换为阿里云镜像：简化你的下载体验
  • linux内核双向链表使用list klist
  • YOLOv11改进策略【注意力机制篇】| 添加SE、CBAM、ECA、CA、Swin Transformer等注意力和多头注意力机制
  • L2-004 这是二叉搜索树吗？
  • C++中vector类的使用
  • Google Tag Manager - 服务器端代码植入
  • Python与SQL Server数据库结合导出Excel并做部分修改
  • ElasticSearch安装分词器与整合SpringBoot
  • 【制作自解压程序】使用7Z制作自解压程序
  • OceanBase技术解析：自适应分布式下压技术
  • 【软件整理资料】软件项目配套资料，项目计划书（word）
  • IDEA使用技巧和插件推荐
  • 爬虫及数据可视化——运用Hadoop和MongoDB数据进行分析
  • js中的深拷贝与浅拷贝 手写深拷贝代码
  • 深入剖析 Android Lifecycle：构建高效稳定的应用
  • 如何设计能吸引下载的截图以及注意事项
  • SpringBoot助力墙绘艺术市场创新
  • golang学习笔记16-数组
  • java 解析excel （本地资源）
  • Android常用C++特性之std::find_if
  • CF1619D.New Year‘s Problem
  • 解决 TypeError: Expected state_dict to be dict-like, , got ＜class ‘*‘＞.
  • Acwing 最小生成树