React Native Expo 速成教程：AsyncStorage，非敏感数据的持久化存储

2024-01-06 02:44:12

React Native Expo 速成教程 7 - AsyncStorage

前言

AsyncStorage 是 React Native Expo 中用于管理非敏感数据的强大工具。它提供了一种简单、高效的方法来存储和检索数据，即使应用程序重新启动或设备重新启动。在本文中，我们将深入探讨 AsyncStorage，了解它的工作原理，并通过一系列示例代码演示如何使用它。

AsyncStorage 是什么？

AsyncStorage 是一种键值存储系统，这意味着它使用键和值对来存储和检索数据。与其他存储选项（如 LocalStorage）不同，AsyncStorage 是异步的，这意味着它在后台执行操作，不会阻塞主线程。它还持久存在，这意味着即使关闭应用程序或设备重新启动，存储的数据也不会丢失。

何时使用 AsyncStorage？

AsyncStorage 非常适合存储非敏感数据，例如用户首选项、缓存数据或其他需要持久存储的信息。以下是一些典型的用例：

存储用户登录状态
缓存网络请求结果
存储设备设置
维护购物车项

使用 AsyncStorage

安装

AsyncStorage 预装在 React Native Expo 中，因此无需安装任何其他依赖项。

使用方式

AsyncStorage 的使用非常简单。它提供了四个主要方法：

setItem(key, value) ：存储一个键值对。
getItem(key) ：根据键检索值。
removeItem(key) ：删除一个键值对。
getAllKeys() ：检索所有键的数组。

示例代码

让我们通过一些示例代码来展示如何使用 AsyncStorage：

存储数据

import AsyncStorage from 'async-storage';

const storeData = async () => {
  try {
    await AsyncStorage.setItem('my_key', 'my_value');
    console.log('Data stored successfully.');
  } catch (e) {
    console.error('Failed to store data.', e);
  }
};

检索数据

import AsyncStorage from 'async-storage';

const getData = async () => {
  try {
    const value = await AsyncStorage.getItem('my_key');
    if (value !== null) {
      console.log(`Data retrieved successfully: ${value}`);
    } else {
      console.log('No data found.');
    }
  } catch (e) {
    console.error('Failed to retrieve data.', e);
  }
};

删除数据

import AsyncStorage from 'async-storage';

const removeData = async () => {
  try {
    await AsyncStorage.removeItem('my_key');
    console.log('Data removed successfully.');
  } catch (e) {
    console.error('Failed to remove data.', e);
  }
};

检索所有键

import AsyncStorage from 'async-storage';

const getAllKeys = async () => {
  try {
    const keys = await AsyncStorage.getAllKeys();
    console.log('All keys:', keys);
  } catch (e) {
    console.error('Failed to retrieve keys.', e);
  }
};