ReactNative——数据存储AsyncStorage

首先看看官网对AsyncStorage的定义:

AsyncStorage是一个简单的、异步的、持久化的Key-Value存储系统,它对于App来说是全局性的。它用来代替LocalStorage。

LocalStorage是什么呢?

在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题

目前React项目中也是使用LocalStorage

我们注意到一个非常关键的词:异步。这也是我在项目中遇到的问题。

当我们在ComponentwillMount()中使用使用AsyncStorage获取本地数据的时候,由于是一个异步的过程导致界面加载的时候,某些数据还未获取到,但是已经被界面用到了。

我的错误的例子:

这里写代码

简单的方法

注意:`AsyncStorage“只能存储字符串,需要把对象转换为字符串才行

save() {
        var object = {username: 'li',id: '654321654321'};
        // JSON.stringify(object): JSON对象转换为字符串 用来存储 
        AsyncStorage.setItem('object',JSON.stringify(object),(error) => { if (error) { alert('失败'); } else { alert('成功'); } }); } 
read(){
        AsyncStorage.getItem('object',(error,result)=>{ if (error) { alert('失败'); } else { alert('成功'); } }) }
delete(){
        AsyncStorage.removeItem('object',(error)=>{ if (error) { alert('失败'); } else { alert('成功'); } }); }

其他方法请移步API

本文重点!!!!!!!!使用封装的react-native-storage模块

功能强大、好用、清晰、

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...