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
}

常用的方法

获取键所对应的值：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, value: string, callback:(error))
合并现有值和输入值。
清除所有的数据：static clear(callback:(error))
清除所有的内容。
获取所有的键：static getAllKeys(callback:(error, keys))
获取所有的键。
清除进行中的查询操作：static flushGetRequests()
清除所有进行中的查询操作。
获取多个键对应的值：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', 'val1'], ['k2', '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,
    },
});