【学习打卡】第7天 React Native 本地存储

课程名称：RN入门到进阶，打造高质量上线App(2022全新升级)

课程章节：3-5 .React Native数据库编程之AsyncStorage精讲

主讲老师：CrazyCodeBoy

课程内容：今天学习的主要内容包括：AsyncStorage的使用和封装

课程收获：

1. React Native Async Storage 的安装

首先，进入官网：https://react-native-async-storage.github.io/async-storage/docs/install/

使用yarn来进行安装

执行命令

yarn add @react-native-async-storage/async-storage

在Android上不需要额外的操作，因为项目是大于0.60的版本，

在ios上，需要使用CocoaPods 将原生添加到项目中：RNAsyncStorage

npx pod-install

2. 用法

Async Storage 是用来进行数据存储的，类型于浏览器的LocalStorage是一个持久化存储的方案。

在使用Async Storage的时候，我们需要对数据进行序列化操作

先导入方法

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

存储数据

setItem是用来进行数据存储的。

存储字符串

const storeData = async (value) => {
  try {
    await AsyncStorage.setItem('@storage_Key', value)
  } catch (e) {
    // saving error
  }
}

存储对象

const storeData = async (value) => {
  try {
    const jsonValue = JSON.stringify(value)
    await AsyncStorage.setItem('@storage_Key', jsonValue)
  } catch (e) {
    // saving error
  }
}

获取数据

getItem是进行数据读取的。如果没有找到存的数据，将会返回一个null

获取字符串数据

const getData = async () => {
  try {
    const value = await AsyncStorage.getItem('@storage_Key')
    if(value !== null) {
      // value previously stored
    }
  } catch(e) {
    // error reading value
  }
}

获取对象

const getData = async () => {
  try {
    const jsonValue = await AsyncStorage.getItem('@storage_Key')
    return jsonValue != null ? JSON.parse(jsonValue) : null;
  } catch(e) {
    // error reading value
  }
}

3. 对存储方法进行封装。

对于数据的存储，使用上述的代码都过于麻烦，我们可以把这些方法封装起来，然后进行调用

代码：

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

export default class StorageUtil {
  /**
   * 获取数据
   * @param key 数据的key值
   * @return {Promise<any> | Promise}
   */
  static getItem(key: string) {
    return new Promise<any>((resolve, reject) => {
      AsyncStorage.getItem(key, (error, result) => {
        if (error) {
          reject(error);
          return;
        }
        // 判断是否是个对象
        try {
          resolve(JSON.parse(result!));
        } catch (e) {
          resolve(result);
        }
      });
    });
  }

  /**
   * 保存数据
   * @param key
   * @param data
   */
  static setItem(key: string, data: any) {
    data = typeof data === 'object' ? JSON.stringify(data) : data;
    AsyncStorage.setItem(key, data, error => {
      if (error) {
        //Tips.toast('保存失败');
      }
    });
  }

  /**
   * 删除数据
   * @param key
   */
  static removeItem(key: string) {
    AsyncStorage.removeItem(key, error => {
      if (error) {
        //Tips.toast('删除失败');
      }
    });
  }

  /**
   *  删除json文件
   */
  static clear() {
    AsyncStorage.clear(error => {
      if (error) {
        //Tips.toast('文件删除失败');
      }
    });
  }
}

今天学习课程加练习一共用了30分钟，主要是学习对React Native本地存储的使用。