react-native - React Native - 如何查看 AsyncStorage 中存储的内容？

Question

我将一些项目保存到AsyncStorageReact Native 中，并且我正在使用 chrome 调试器和 iOS 模拟器。

没有本机反应，使用常规网络开发localStorage，我能够看到下存储的localStorage项目Chrome Debugger > Resources > Local Storage

知道如何查看 React NativeAsyncStorage存储的项目吗？

Answer 1

React Native Debugger内置了这个。

只需调用showAsyncStorageContentInDev()RND 控制台，您就可以看到应用程序存储的转储。

Answer 2

你可以使用 reactotron 我认为它有异步存储资源管理器；） https://github.com/infinitered/reactotron

Answer 3

以下应该工作，

AsyncStorage.getAllKeys((err, keys) => {
  AsyncStorage.multiGet(keys, (error, stores) => {
    stores.map((result, i, store) => {
      console.log({ [store[i][0]]: store[i][1] });
      return true;
    });
  });
});

Answer 4

我创建了一个辅助方法来将所有存储记录在一个对象中（例如在 Reactotron 中记录更干净）：

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

export function logCurrentStorage() {
  AsyncStorage.getAllKeys().then((keyArray) => {
    AsyncStorage.multiGet(keyArray).then((keyValArray) => {
      let myStorage: any = {};
      for (let keyVal of keyValArray) {
        myStorage[keyVal[0]] = keyVal[1]
      }

      console.log('CURRENT STORAGE: ', myStorage);
    })
  });
}

Answer 5

也许晚了，但这些解决方案都不适合我。在 android 上，使用 Android Studio 打开文件资源管理器，然后转到data/data/your_package_name 在里面你应该有一个名为database的文件夹和一个文件RKStorage。

该文件是一个 SQLite3 文件，因此请获取您最喜欢的 SQLite 资源管理器并进行探索。如果你想要一个，这个就可以了：DB Browser for SQLite

Answer 6

使用蓝鸟，您可以这样做：

const dumpRaw = () => {
  return AsyncStorage.getAllKeys().then(keys => {
    return Promise.reduce(keys, (result, key) => {
      return AsyncStorage.getItem(key).then(value => {
        result[key] = value;
        return result;
      });
    }, {});
  });
};

dumpRaw().then(data => console.log(data));

Answer 7

我没有发现 Reactotron 启用了任何类型的漂亮打印，而且它也很隐蔽，所以我只是使用 lodash 编写了一个简单的函数。你也可以使用下划线。

假设您有所有键的静态映射...

const keys = {
  key1: 'key1',
  key2: 'key2'
}

export function printLocalStorage() {
  _.forEach(keys, (k, v) => {
    localStore.getAllDataForKey(v).then(tree => {
      console.log(k) // Logs key above the object
      console.log(tree) // Logs a pretty printed JSON object
    })
  })
}

它不是高性能的，但它解决了问题。

Answer 8

您可以定义函数以使用 async 和 await 获取所有密钥

    getAllkeys = () => {
    return new Promise( async (resolve, reject) => {
    try {
      let keys = await AsyncStorage.getAllKeys();
      let items = await AsyncStorage.multiGet(keys)
      resolve(items)
    } catch (error) {
      reject(new Error('Error getting items from AsyncStorage: ' + error.message))
    }
  });
}


    somefunc = async () => {
    try {
    var items = await getAllkeys();
    var someItems = items.filter(function (result, i, item) {
          // do filtering stuff
          return item;
    });
    // do something with filtered items 
    } catch (error) {
    // do something with your error
    }
}

Answer 9

反应本机调试器
右键单击可用空间