React Native 之本地存储 AsyncStorage

一、项目背景

---

最近的项目中，遇到一个问题，用户初次进入一个RN页面，会有一个toast弹框提示，业务的要求是这个toast提示只要展示一次就好了，如果每次用户进来都提示，体验会非常不友好。

经过一番尝试后，了解到了React Native中的提供一个本地存储API-->AsyncStorage。我们给出的解决方案是，用户点击关闭toast弹框后，以后不管是重新登陆还是重新运行程序，这个toast弹框都不再展示。（除非卸载客户端重新安装）

二、AsyncStorage简介

---

基本概念

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

在 iOS 上，AsyncStorage在原生端的实现是把较小值存放在序列化的字典中，而把较大值写入单独的文件。在 Android 上，AsyncStorage会尝试使用RocksDB，或退而选择 SQLite。

本模块的 JS 代码提供了对原生实现的一个封装，以提供一个更清晰的 JS API、抛出真正的Error对象，以及简单的单项对象操作函数。每个方法都会返回一个Promise对象。

AsyncStorage只能用来储存字符串数据，所以为了去储存object类型的数据，得先进行序列化（JSON.stringify()）当你想要使用数据的时候，就可以使用JSON.parse()。

常用方法

getItem()

static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void)

读取key字段并将结果作为第二个参数传递给callback。如果有任何错误发生，则会传递一个Error对象作为第一个参数。返回一个Promise对象。

参数：

名称	类型	必需	说明
key	string	是	要读取的字段名
callback	?(error: ?Error, result: ?string) => void	否	读取完成后的回调函数（不建议使用）

setItem()

static setItem(key: string, value: string, [callback]: ?(error: ?Error) => void)

将key字段的值设置成value(注意 value 必须是字符串值，非字符串数据必须先序列化为字符串)，并在完成后调用callback函数。如果有任何错误发生，则会传递一个Error对象作为第一个参数。返回一个Promise对象。

参数：

名称	类型	必需	说明
key	string	是	要写入的字段名
value	string	是	要写入key字段的值
callback	?(error: ?Error) => void	否	发生错误时的回调函数

removeItem()

static removeItem(key: string, [callback]: ?(error: ?Error) => void)

删除一个字段。返回一个Promise对象。

参数：

名称	类型	必需	说明
key	string	是	要删除的字段名。
callback	?(error: ?Error) => void	否	发生错误时的回调函数

三、使用

---

导入AsyncStorage

import { AsyncStorage } from 'react-native';//新版本的RN已经将AsyncStorage移除了，建议使用下面方法引入

import AsyncStorage from '@react-native-async-storage/async-storage'

代码示例

import AsyncStorage from '@react-native-async-storage/async-storage'

export default class A extends Component{
    constructor(props){
        super(props);
        this.state = {
            tipsVisible: true //是否显示toast弹框标志，默认true，第一次进入显示
        }
    }
    
    componentDidmount(){
        //每次进入页面都要获取AsyncStorage中存储的tips值，如果为1，代表用户手动关闭了弹框，以后不再展示，将tipsVisible赋值为false
        AsyncStorage.getItem('tip').then(res =>{
            console.log(res, 'res')
            this.setState({
                tipsVisible: res === '1' ? false : true
            })
        })
    }
    
    //点击toast弹框方法
    hanldeHideTips(){
        this.setState({
            tipsVisible: false //关闭弹框
        })
        AsyncStorage.setItem('tips', '1') // 给AsyncStorage中tips赋值为1
    }
    
    render(){
        return(
            <View>
                {this.state.tipsVisible ? (<TouchableOpacity onPress={this.hanldeHideTips()}>
                    <Label text={'关闭'} />
                </TouchableOpacity> ) : null
                }
            </View>
        )
    }
}