• uni-app本地存储


    概要

    大家好,今天和大家分享一下uni-app中的本地存储,其中分为同步和异步,有些朋友可能也在这两个概念中迷惑过,下面我们就来讲讲这个本地存储。

    一,存储数据

    1.uni.setStorage(OBJECT)

    数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口。

    OBJECT参数

    参数名类型必填说明
    keyString本地缓存中的指定的 key
    dataAny需要存储的内容,只支持原生类型、及能够通过 JSON.stringify 序列化的对象
    successFunction接口调用成功的回调函数
    failFunction接口调用失败的回调函数
    completeFunction接口调用结束的回调函数(调用成功、失败都会执行)
    示例
    uni.setStorage({
        key:"token",
        data:'123456',
        success: function (){
            console.log("存储成功")
        }
    })
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    2.uni.setStorageSync(KEY, DATA)

    将data存储在本地缓存中指定的key中,会覆盖掉原来该key对应的内容, 这是一个同步接口

    try{
        uni.setStorageSync('token', '123456')
    } catch (e){
        //错误
    }
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    //缓存数据
    setStorage(){
    	//这也是一个同步接口。
    	//第一个参数是本地缓存中的指定的 key
    	//第二个参数是需要存储的内容
    	uni.setStorageSync('id',1);
    },
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    二,获取数据

    1.uni.getStorage(OBJECT)

    本地存储中异步获取对应可以对应的内容

    参数名类型必填说明
    keyString本地缓存中的指定的 key
    successFunction接口调用的回调函数,res = {data: key对应的内容}
    failFunction接口调用失败的回调函数
    completeFunction接口调用结束的回调函数(调用成功、失败都会执行)
    uni.getStorage({
        key:"token",
        success: function(res){
            console.log(res.data);
        }
    })
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    2.uni.getStorageSync(KEY)

    从本地缓存中同步获取指定key对应的内容

    try {
        const value = uni.getStorageSync("token");
        if(value) {
            console.log(value)
        }
    } catch(e){
        //错误
    }
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    3.uni.getStorageInfo(OBJECT)

    异步获取当前Storage的相关信息

    参数名类型说明
    keysArray<String>当前 storage 中所有的 key
    currentSizeNumber当前占用的空间大小, 单位:kb
    limitSizeNumber限制的空间大小, 单位:kb
    uni.getStorageInfo({
        success: function(res) {
            console.log(res.keys);
            console.log(res.currentSize);
            console.log(res.limitSize);
        }
    })
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    4.uni.getStorageInfoSync()

    同步获取当前storage的相关信息

    try {
        const res = uni.getStorageInfoSync();
        console.log(res.keys);
        console.log(res.currentSize);
        console.log(res.limitSize);
    } catch (e) {
        // 错误
    }
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    获取数据同步

    getStorage(){
    	//这是一个同步接口。
    	//参数本地缓存中的指定的 key通过赋值给一个变量获取
    	const value = uni.getStorageSync('id');
    	console.log(value);
    },
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    三,移除数据

    1.uni.removeStorage(OBJECT)

    从本地缓存中异步移除指定key

    uni.removeStorage({
        key:'token',
        success: function(res){
            console.log('删除成功')
        }
    })
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    2.uni.removeStorageSync(KEY)

    从本地缓存中同步移除指定key

    try {
        uni.removeStorageSync('storage_key')
    } catch(e){
        //错误
    }
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    3.uni.clearStorage()

    清除本地缓存

    uni.clearStorage();
    
    
    • 1
    • 2

    4.uni.clearStorageSync()

    同步清理本地数据缓存

    try {
    	uni.clearStorageSync();
    } catch (e) {
    	//错误
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5

    同步移除

    removeStorage(){
    	//这是一个同步接口。
    	//参数本地缓存中的指定的 key通过赋值给一个变量获取
    	const value = uni.removeStorageSync("id");
    	console.log("移除成功");
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    技术细节

    其中同步异步的这个问题可以自己打印一下看看,在onShow里面分别使用同步和异步获取数据进行赋值,在其它生命周期内打印,看哪些有值哪些没有值,我之前也是没有意识到这个问题导致出现了一些错误,这个不是this指向的问题,也是容易误解的地方。

    小结

    以上就是本章的全部内容了,下一章我打算讲一下这个同步和异步,希望能够帮助到您,谢谢大家。

  • 相关阅读:
    后端每日一题 1:说一下三次握手
    文心一言 VS 讯飞星火 VS chatgpt (121)-- 算法导论10.4 2题
    Cmake、Qt与VS编译VTK(生成QVTK)
    智能振弦传感器:参数智能识别技术的重要科技创新
    AFL模糊测试+GCOV覆盖率分析
    Day13:数据结构之(B-树)2-3树
    线性系统的激励和响应以及与系统特性的联系
    Linux 怎样通过win 远程桌面连接链接Linux后台服务器的可视化图形界面
    【numpy手写系列】用PCA、LDA、SVM与CNN手写人脸识别代码
    RDS:在 Windows Server 2016/2019 中的 RDS/RemoteApp 性能问题
  • 原文地址:https://blog.csdn.net/SqlloveSyn/article/details/130727840