React Native AsyncStorage

2025年3月17日 | 阅读 3 分钟

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

React Native 建议使用在 AsyncStorage 之上的抽象，而不是直接使用 AsyncStorage，因为它全局操作。

在 iOS 上，AsyncStorage 经由原生代码批准。 iOS 原生代码将小的值存储在序列化的字典中，而较大的值存储在单独的文件中。

在 Android 上，AsyncStorage 将使用 SQLite 或 RocksDB，具体取决于可用性。

要使用 AsyncStorage，请导入 AsyncStorage 库，如下所示：

持久化数据

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

持久化单个值的示例

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

在对象中持久化多个值的示例

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

获取数据

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

获取单个值的示例

从对象中获取值的示例

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

React Native 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 = "Michal";
    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',
  },
});

输出

React Native 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 = "Michal";*/
    let obj = {
      name: 'Michal',
      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',
  },
});

输出