关注我们

React Native - AsyncStorage

React Native AsyncStorage是一个简单，未加密，异步，持久的存储系统，可将数据全局存储在应用程序中。它以键值对的形式存储数据。

React Native建议在AsyncStorage之上使用抽象，而不是直接在AsyncStorage上使用，因为它在全局范围内运行。

在iOS上，AsyncStorage已通过本机代码批准。 iOS本机代码将较小的值存储在序列化的字典中，将较大的值存储在单独的文件中。

在Android上，AsyncStorage将根据可用性使用SQLite或RocksDB。

要使用AsyncStorage，请将AsyncStorage库导入为:

复制代码

import {AsyncStorage} from 'react-native';

保存数据

React Native AsyncStorage 使用 setItem()方法保存数据，如下所示:

复制代码

AsyncStorage.setItem('key', 'value');

保留单个值的示例:

复制代码

let name = "Learnfk";
AsyncStorage.setItem('user',name);

在对象中保留多个值的示例:

复制代码

let obj = {
      name: 'Learnfk',
      email: 'michal@gmail.com',
      city: 'New York',
    }
AsyncStorage.setItem('user',JSON.stringify(obj));

获取数据

React Native AsyncStorage使用 getItem()方法获取保存的数据，如下所示:

复制代码

await AsyncStorage.getItem('key');

获取单个值的示例:

复制代码

await AsyncStorage.getItem('user');

从对象获取值的示例:

复制代码

let user = await AsyncStorage.getItem('user');
let parsed = JSON.parse(user);
alert(parsed.email);

AsyncStorage示例1

在此示例中，我们创建了两个TouchableOpacity组件，一个用于保存数据，另一个用于检索。从第一个TouchableOpacity组件调用savaData()方法以保存数据，从第二个TouchableOpacity组件调用displayData()方法以获取数据。

复制代码

import React, {Component} from 'react';
import {Platform, StyleSheet, Text,
  View,TouchableOpacity, AsyncStorage,
} from 'react-native';

export default class App extends Component<Props> {
  saveData(){
    let name = "Learnfk";
    AsyncStorage.setItem('user',name);
  }
  displayData = async ()=>{
    try{
      let user = await AsyncStorage.getItem('user');
      alert(user);
    }
    catch(error){
      alert(error)
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress ={this.saveData}>
          <Text>Click to save data</Text>
        </TouchableOpacity>  
        <TouchableOpacity onPress ={this.displayData}>
          <Text>Click to display data</Text>
        </TouchableOpacity> 
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

输出:

AsyncStorage示例2

在此示例中，我们将使用JSON.stringify()将多个值保存为JSON对象形式。 JSON.stringify()接受JavaScript对象，并将其转换为JSON字符串。另一方面，JSON.parse()方法用于获取AsyncStorage数据。此方法接受JSON字符串并将其转换为JavaScript对象，然后再返回它们。

复制代码

import React, {Component} from 'react';
import {Platform, StyleSheet, Text,
  View,TouchableOpacity, AsyncStorage,
} from 'react-native';

export default class App extends Component<Props> {
  saveData(){
    /*let user = "Learnfk";*/
    let obj = {
      name: 'Learnfk',
      email: 'michal@gmail.com',
      city: 'New York',
    }
    /*AsyncStorage.setItem('user',user);*/
    AsyncStorage.setItem('user',JSON.stringify(obj));
  }
  displayData = async ()=>{
    try{
      let user = await AsyncStorage.getItem('user');
      let parsed = JSON.parse(user);
      alert(parsed.email);
    }
    catch(error){
      alert(error)
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress ={this.saveData}>
          <Text>Click to save data</Text>
        </TouchableOpacity>  
        <TouchableOpacity onPress ={this.displayData}>
          <Text>Click to display data</Text>
        </TouchableOpacity> 
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});