前言
React Native中常用的数据本地化存储的方法有如下几种：
- AsyncStorage：以键值对的形式存储的轻量存储器，只能存储字符串数据。
- sqlite：一种轻型的数据库，多用于移动端开发，原生应用开发中比较常见。
- Realm：新兴的移动端数据存储方法，使用简单、跨平台、性能优越功能强大。
本文主要主要介绍第一种——AsyncStorage。
AsyncStorage介绍
AsyncStorage是react native提供的轻量存储器，类似Android中的SharePreference， iOS中的NSUserDefault，以键值对的形式存储将信息存储在本地，它是一个简单的、未加密的、异步的、持久化的Key-Value 存储系统，对于App来说是全局性的。官方建议使用时在AsyncStorage的基础上做一层抽象封装，而不是直接使用AsyncStorage。
AsyncStorage的JS代码是对原生实现的一个简易封装，提供一个更清晰的JS API、返回真正的错误对象，以及简单的单项对象操作函数。每个方法都会返回一个Promise对象。
下面是使用AsyncStorage存储数据、获取数据的简单示例。
存储数据：
try {
await AsyncStorage.setItem('samplekey','lalala.');
} catch (error) {
// Error saving data
}
获取数据：
try {
const value = await AsyncStorage.getItem('samplekey');
if (value !== null){
// We have data!!
console.log(value);
}
} catch (error) {
// Error retrieving data
}
常用的方法
获取键所对应的值：
static getItem(key: string,callback:(error,result))
根据键来获取值，获取的结果会放在回调函数中。设置键-值对：
static setItem(key: string,value: string,callback:(error))
根据键来设置值。移除键-值对：
static removeItem(key: string,callback:(error))
根据键来移除项。合并键-值对：
static mergeItem(key: string,callback:(error))
合并现有值和输入值。清除所有的数据：
static clear(callback:(error))
清除所有的内容。获取多个键对应的值：
static multiGet(keys,callback:(errors,result))
获取多项，其中 keys 是字符串数组，比如：['k1','k2']。设置多项键-值对：
static multiSet(keyValuePairs,callback:(errors))
设置多项，其中 keyValuePairs 是字符串的二维数组，比如：[['k1','val1'],['k2','val2']]。删除多项键-值对
static multiRemove(keys,callback:(errors))
删除多项，其中 keys 是字符串数组，比如：['k1','k2']。合并多项键-值对
static multiMerge(keyValuePairs,callback:(errors))
多个键值合并，其中 keyValuePairs 是字符串的二维数组，比如：[['k1','val2']]。
使用实例
下面示例中主要通过 AsyncStorage.getItem、 AsyncStorage.setItem、AsyncStorage.removeItem实现AsyncStorage的增删查，如果对同一个key用setItem设置不同的值，后一次设置的值会覆盖前一次的值，以此来实现对数据的修改更新。
import React,{ Component } from 'react';
import {
StyleSheet,View,Text,Dimensions,Button,AsyncStorage
} from 'react-native';
const {width,height} = Dimensions.get('window');
var data = "";
const AsyncStorageKey = "ASE_";
export default class AsyncStorageExample extends Component {
constructor(props) {
super(props);
this.state = {
data:""
};
}
setData(text){
AsyncStorage.setItem(AsyncStorageKey,text,()=>{
this.setState({
data:text,});
});
}
delData(){
AsyncStorage.getItem(AsyncStorageKey,(error,text)=>{
if(text=== null ){
alert(AsyncStorageKey +"没有对应的值");
}else{
//移除键-值对
AsyncStorage.removeItem(AsyncStorageKey,()=>{
this.setState({
data:"",},()=>{
alert('删除成功');
});
});
}
});
}
render() {
return (
<View style={styles.container}> <Button onPress={this.setData.bind(this,"我用 AsyncStorage存了一条信息")} style={styles.itemView} title="存储数据"> </Button> <Button onPress={this.delData.bind(this)} style={styles.itemView} title="删除数据" > </Button> <Text style={{paddingTop:40}}> AsyncStorage存储的值是: </Text> <Text> {this.state.data} </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,backgroundColor: '#f2f2f2',paddingTop:20,itemView:{ backgroundColor:'grey',height:44,width:width,justifyContent:'center',marginTop:10,itemText:{ fontSize:15,color:'#ffffff',textAlign:'left',marginLeft:20,});
