• 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指向的问题,也是容易误解的地方。

    小结

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

  • 相关阅读:
    图像处理7-图像增强
    破解tomcat密码并上传webshell
    【ICCV 2019】ACNet: 使用非对称卷积块增强CNN的卷积核骨架
    【COSBench系列】2. CosBench开发环境配置
    数据存储——存储图像
    (Clock Domain Crossing)跨时钟域信号的处理 (自我总结)
    caffe-make_runtest
    TVM-MLC LLM 调优方案
    java计算机毕业设计高校大学生就业系统MyBatis+系统+LW文档+源码+调试部署
    【uniapp基础篇】实现微信登录
  • 原文地址:https://blog.csdn.net/SqlloveSyn/article/details/130727840