npm 包 @react-native-community/async-storage 使用教程

@(前端)[npm|react-native|async-storage|中文教程]

简介

@react-native-community/async-storage 是一个用于在 React Native 应用中存储简单键值对数据的包。它可以用于保存应用状态，用户设置等信息。这个包提供了简单明了的 API，能够轻松地读/写数据。此外，它支持纯 JavaScript，无需额外的本地代码。

安装

npm install @react-native-community/async-storage

导入

import AsyncStorage from '@react-native-community/async-storage';

API

setItem(key: string, value: string): Promise<void>

将键值对数据存储到异步存储中。必须注意的是，键值对数据只能是字符串类型。

示例代码：

async function setData() {
  try {
    await AsyncStorage.setItem('name', 'John Doe');
    console.log('Data saved successfully!');
  } catch (error) {
    console.error(error);
  }
}

getItem(key: string): Promise<string | null>

从异步存储中获取键对应的值。如果键不存在，则返回 null。

示例代码：

async function getData() {
  try {
    const name = await AsyncStorage.getItem('name');
    console.log('Name is:', name);
  } catch (error) {
    console.error(error);
  }
}

removeItem(key: string): Promise<void>

从异步存储中删除指定的键。

示例代码：

async function removeData() {
  try {
    await AsyncStorage.removeItem('name');
    console.log('Data removed successfully!');
  } catch (error) {
    console.error(error);
  }
}

getAllKeys(): Promise<string[]>

获取异步存储中所有的键。

示例代码：

async function getKeys() {
  try {
    const keys = await AsyncStorage.getAllKeys();
    console.log('All keys:', keys);
  } catch (error) {
    console.error(error);
  }
}

clear(): Promise<void>

清空异步存储。

示例代码：

async function flushData() {
  try {
    await AsyncStorage.clear();
    console.log('Data flushed successfully!');
  } catch (error) {
    console.error(error);
  }
}

注意事项

1. 请勿在未使用任何密码学技术的情况下存储重要的、敏感的数据。
2. 存储的键和值都必须是字符串类型，否则可能出现错误。
3. 在安卓版的应用中，请在 AndroidManifest.xml 文件中声明 READ_EXTERNAL_STORAGE 和 WRITE_EXTERNAL_STORAGE 权限。

结论

@react-native-community/async-storage 是 React Native 应用存储数据的一种简单且容易使用的方式。无论是存储用户设置还是在应用间传递状态都能帮我们大大简化开发难度。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f04179b403f2923b035be3c