如何使用React Native将数据存储在本地存储中?

时间:2020-10-01 11:58:49

标签: database react-native redux

我想用响应本机和redux的注释创建待办事项列表。我有在不同位置以不同状态存储便笺和待办事项的复杂逻辑。如何将所有关系和所有数据存储在Android / IOS设备的本地存储中?

2 个答案:

答案 0 :(得分:1)

异步存储只能存储字符串数据,因此要存储对象数据,您需要先对其进行序列化。对于可以序列化为JSON的数据,可以在保存数据时使用JSON.stringify(),在加载数据时使用JSON.parse()。

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

存储字符串值

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
  }
}

读取字符串值

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
  }
}

答案 1 :(得分:0)

为此,您将使用类似https://github.com/react-native-community/async-storage

但是,请注意AsyncStorage的限制,例如加密和大小。

您可以这样使用它:

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

export default {
  setItem: async (key, value) => {
    try {
      await AsyncStorage.setItem(key, JSON.stringify(value));
    } catch (error) {}
  },
  getItem: async (key) => {
    try {
      const item = await AsyncStorage.getItem(key);

      return JSON.parse(item);
    } catch (error) {}
  },
  removeItem: async (key) => {
    try {
      await AsyncStorage.removeItem(key);
    } catch (error) {}
  },
  updateItem: async (key, value) => {
    try {
      const item = await AsyncStorage.getItem(key);
      const result = {...JSON.parse(item), ...value};

      await AsyncStorage.setItem(key, JSON.stringify(result));
    } catch (error) {}
  },
};