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

小结

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


相关文章
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么?
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么?
164 0
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
161 0
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
178 1
|
存储 缓存 小程序
uni-app微信小程序保持登录状态(vuex和本地存储)
uni-app微信小程序保持登录状态(vuex和本地存储)
uni-app微信小程序保持登录状态(vuex和本地存储)
|
存储 人工智能 数据库
App Inventor 2 本地存储之“微数据库”组件,App数据持久化
数据存储一般分为两大类:本地 和 网络,本地一般是数据文件的形式存储在手机上,本地App每次启动都可以共享读取,但是不同的手机之间不可以共享数据;如果需要多个手机之间共享获取或存储数据的话,那就需要用到网络数据库了(云数据库、网络微数据库,它们目前默认都是MIT服务器),它的原理就是用户A将数据通过网络传输到云服务器,然后用户B通过网络可以读取到用户A存储的数据,最典型的应用就是类似微信的聊天App了。 本地数据库一般指的就是“微数据库”,提供键、值方式的存储。
814 0
|
1月前
|
缓存 移动开发 JavaScript
如何优化UniApp开发的App的启动速度?
如何优化UniApp开发的App的启动速度?
361 139
|
1月前
|
移动开发 JavaScript weex
UniApp开发的App在启动速度方面有哪些优势和劣势?
UniApp开发的App在启动速度方面有哪些优势和劣势?
279 137
|
2月前
|
移动开发 小程序 Android开发
基于 uni-app 开发的废品回收类多端应用功能与界面说明
本文将对一款基于 uni-app 开发的废品回收类多端应用,从多端支持范围、核心功能模块及部分界面展示进行客观说明,相关资源信息也将一并呈现。
124 0
|
28天前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
178 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡

热门文章

最新文章