uni-app本地存储

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

概要

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

一,存储数据

1.uni.setStorage(OBJECT)

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

OBJECT参数

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

2.uni.setStorageSync(KEY, DATA)

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

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

二,获取数据

1.uni.getStorage(OBJECT)

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

参数名 类型 必填 说明
key String 本地缓存中的指定的 key
success Function 接口调用的回调函数,res = {data: key对应的内容}
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)
uni.getStorage({
    key:"token",
    success: function(res){
        console.log(res.data);
    }
})

2.uni.getStorageSync(KEY)

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

try {
    const value = uni.getStorageSync("token");
    if(value) {
        console.log(value)
    }
} catch(e){
    //错误
}

3.uni.getStorageInfo(OBJECT)

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

参数名 类型 说明
keys Array<String> 当前 storage 中所有的 key
currentSize Number 当前占用的空间大小, 单位:kb
limitSize Number 限制的空间大小, 单位:kb


uni.getStorageInfo({
    success: function(res) {
        console.log(res.keys);
        console.log(res.currentSize);
        console.log(res.limitSize);
    }
})

4.uni.getStorageInfoSync()

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

try {
    const res = uni.getStorageInfoSync();
    console.log(res.keys);
    console.log(res.currentSize);
    console.log(res.limitSize);
} catch (e) {
    // 错误
}


获取数据同步

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


三,移除数据

1.uni.removeStorage(OBJECT)

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

uni.removeStorage({
    key:'token',
    success: function(res){
        console.log('删除成功')
    }
})

2.uni.removeStorageSync(KEY)

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

try {
    uni.removeStorageSync('storage_key')
} catch(e){
    //错误
}

3.uni.clearStorage()

清除本地缓存

uni.clearStorage();

4.uni.clearStorageSync()

同步清理本地数据缓存

try {
  uni.clearStorageSync();
} catch (e) {
  //错误
}

同步移除

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

技术细节

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

小结

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


相关文章
|
11天前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么?
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么?
16 0
|
11天前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
31 0
|
11天前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
38 1
|
存储 人工智能 数据库
App Inventor 2 本地存储之“微数据库”组件,App数据持久化
数据存储一般分为两大类:本地 和 网络,本地一般是数据文件的形式存储在手机上,本地App每次启动都可以共享读取,但是不同的手机之间不可以共享数据;如果需要多个手机之间共享获取或存储数据的话,那就需要用到网络数据库了(云数据库、网络微数据库,它们目前默认都是MIT服务器),它的原理就是用户A将数据通过网络传输到云服务器,然后用户B通过网络可以读取到用户A存储的数据,最典型的应用就是类似微信的聊天App了。 本地数据库一般指的就是“微数据库”,提供键、值方式的存储。
381 0
|
存储 缓存 小程序
uni-app微信小程序保持登录状态(vuex和本地存储)
uni-app微信小程序保持登录状态(vuex和本地存储)
uni-app微信小程序保持登录状态(vuex和本地存储)
|
11天前
|
移动开发 小程序
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
|
11天前
|
API 数据安全/隐私保护 iOS开发
利用uni-app 开发的iOS app 发布到App Store全流程
利用uni-app 开发的iOS app 发布到App Store全流程
116 3
|
11天前
|
Android开发 开发者 UED
个人开发 App 成功上架手机应用市场的关键步骤
个人开发 App 成功上架手机应用市场的关键步骤
|
11天前
|
开发工具 数据安全/隐私保护 Android开发
【教程】APP 开发后如何上架?
【教程】APP 开发后如何上架?
|
11天前
|
API
uni-app 146朋友圈列表api开发
uni-app 146朋友圈列表api开发
22 0