react native学习笔记16——存储篇（1）AsyncStorage

前言

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
}

常用的方法

1. 获取键所对应的值：static getItem(key: string,callback:(error,result))
   根据键来获取值，获取的结果会放在回调函数中。

2. 设置键-值对：static setItem(key: string,value: string,callback:(error))
   根据键来设置值。

3. 移除键-值对：static removeItem(key: string,callback:(error))
   根据键来移除项。

4. 合并键-值对：static mergeItem(key: string,callback:(error))
   合并现有值和输入值。

5. 清除所有的数据：static clear(callback:(error))
   清除所有的内容。

6. 获取所有的键：static getAllKeys(callback:(error,keys))
   获取所有的键。

7. 清除进行中的查询操作：static flushGetRequests()
   清除所有进行中的查询操作。

8. 获取多个键对应的值：static multiGet(keys,callback:(errors,result))
   获取多项，其中 keys 是字符串数组，比如：['k1','k2']。

9. 设置多项键-值对：static multiSet(keyValuePairs,callback:(errors))
   设置多项，其中 keyValuePairs 是字符串的二维数组，比如：[['k1','val1'],['k2','val2']]。

10. 删除多项键-值对static multiRemove(keys,callback:(errors))
    删除多项，其中 keys 是字符串数组，比如：['k1','k2']。

11. 合并多项键-值对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,});