数据存储是开发APP必不可少的一部分，比如页面缓存，从网络上获取数据的本地持久化等，那么在RN中如何进行数据存储呢？
RN官方推荐我们在RN中用AsyncStorage进行数据存储。
什么是AsyncStorage?
简单的，异步的，持久化的key-value存储系统
AsyncStorage也是Rect Native官方推荐的数据存储方式，旨在代替LocalStorage
AsyncStorage在iOS下存储分两种情况：
如果存储的内容较小，那么AsyncStorage会将要存储的内容凡在个序列化的字典中；
如果存储的值较大，那么AsyncStorage会将存储的内容放在一个单独的文件中；
AsyncStorage在Android下的存储也分两种情况：
AsyncStorage会将数据存储在 RocksDB 或者 SQLite ，具体存储在 RocksDB 中还是SQLite中这取决于设备支持哪一种存储方式了。
如何使用AsyncStorage？
安装
npm install @react-native-async-storage/async-storage
npx pod-install //如果你的是Mac系统需要执行下pod安装
使用
import AsyncStorage from '@react-native-async-storage/async-storage';
存储数据
函数原型
static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void): Promise
实例
/**
* 存储数据
* @returns {Promise.<void>}
*/
async doSave() {
//用法一
AsyncStorage.setItem(KEY, this.value, error => {
error && console.log(error.toString());
});
//用法二
AsyncStorage.setItem(KEY, this.value)
.catch(error => {
error && console.log(error.toString());
});
//用法三
try {
await AsyncStorage.setItem(KEY, this.value);
} catch (error) {
error && console.log(error.toString());
}
}
读取数据
函数原型
static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void): Promise
示例
/**
* 获取数据
*/
async getData() {
//用法一
AsyncStorage.getItem(KEY, (error, value) => {
this.setState({
showText: value
});
console.log(value);
error && console.log(error.toString());
});
//用法二
AsyncStorage.getItem(KEY)
.then(value => {
this.setState({
showText: value
});
console.log(value);
})
.catch(error => {
error && console.log(error.toString());
});
//用法三
try {
const value = await AsyncStorage.getItem(KEY);
this.setState({
showText: value
});
console.log(value);
} catch (error) {
error && console.log(error.toString());
}
}
删除数据
函数原型
static removeItem(key: string, [callback]: ?(error: ?Error) => void): Promise
示例
/**
* 删除数据
* @returns {Promise.<void>}
*/
async doRemove() {
//用法一
AsyncStorage.removeItem(KEY,error => {
error && console.log(error.toString());
});
//用法二
AsyncStorage.removeItem(KEY)
.catch(error => {
error && console.log(error.toString());
});
//用法三
try {
await AsyncStorage.removeItem(KEY);
} catch (error) {
error && console.log(error.toString());
}
}
AsyncStorage有那些常用的API？
setItem()
方法原型：static setItem(key: string, value: string, [callback]: ?(error: ?Error) => void)
该方法提供以key，value键值对的方式存储数据，方法的第三个参数是错误callback，可以通过判断error是否为空来判断是否保存成功。方法返回一个Promise对象。
getItem()
方法原型：static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void)
该方法用户获取存储的数据，方法的第二个参数是callback(error,result)，完成读取数据后会回调该方。方法返回一个Promise对象。
removeItem()
方法原型：static removeItem(key: string, [callback]: ?(error: ?Error) => void)
删除一个字段。可以通过判断error是否为空来判断是否保存成功。方法返回一个Promise对象。
