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

小结

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


相关文章
|
8月前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么?
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么?
88 0
|
8月前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
86 0
|
8月前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
84 1
|
存储 人工智能 数据库
App Inventor 2 本地存储之“微数据库”组件,App数据持久化
数据存储一般分为两大类:本地 和 网络,本地一般是数据文件的形式存储在手机上,本地App每次启动都可以共享读取,但是不同的手机之间不可以共享数据;如果需要多个手机之间共享获取或存储数据的话,那就需要用到网络数据库了(云数据库、网络微数据库,它们目前默认都是MIT服务器),它的原理就是用户A将数据通过网络传输到云服务器,然后用户B通过网络可以读取到用户A存储的数据,最典型的应用就是类似微信的聊天App了。 本地数据库一般指的就是“微数据库”,提供键、值方式的存储。
582 0
|
存储 缓存 小程序
uni-app微信小程序保持登录状态(vuex和本地存储)
uni-app微信小程序保持登录状态(vuex和本地存储)
uni-app微信小程序保持登录状态(vuex和本地存储)
|
14天前
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
8天前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
105 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
6天前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
10天前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
14天前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈

热门文章

最新文章

  • 1
    DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
  • 2
    圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
  • 3
    【05】2025年1月首发完整版-篇幅较长-苹果app如何上架到app store完整流程·不借助第三方上架工具的情况下无需花钱但需仔细学习-优雅草央千澈详解关于APP签名以及分发-们最关心的一篇来了-IOS上架app
  • 4
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 5
    电竞陪玩系统架构优化设计,陪玩app如何提升系统稳定性,陪玩小程序平台的测试与监控
  • 6
    京东商品详情数据接口(H5、APP 端)
  • 7
    年轻人如何运用圈子系统进行扩列,社交圈子论坛app扩列的好处,兴趣行业圈子提升社交技能
  • 8
    【Azure App Service】对App Service中CPU指标数据中系统占用部分(System CPU)的解释
  • 9
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
  • 10
    app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈