【问题标题】:React Native - How to see what's stored in AsyncStorage?React Native - 如何查看 AsyncStorage 中存储的内容?
【发布时间】:2016-07-25 14:16:25
【问题描述】:

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

没有 react native,使用常规的 web 开发 localStorage,我能够看到 Chrome Debugger > Resources > Local Storage 下存储的 localStorage 项目

知道如何查看 React Native AsyncStorage 存储的项目吗?

【问题讨论】:

  • 不确定是否存在这样的工具,我通常只是查询它并传递一个回调来记录它。 AsyncStorage.getItem('thing').then((res) => console.log(res))
  • 是的,这就是我现在所做的,但我想看看是否有一种可视化的方式来查看存储中的所有内容。

标签: react-native asyncstorage


【解决方案1】:

React Native Debugger 内置了这个功能。

只需在 RND 控制台中调用 showAsyncStorageContentInDev(),您就可以看到应用存储的转储。

【讨论】:

    【解决方案2】:

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

    【讨论】:

    • 非常好的工具
    • 这是完美的,感谢分享这个工具。哦,对于像我这样的其他果岭,请确保您有 AsyncStorage.getItem(item);
    • 嗨@tmehta2442 我没有在reactotron 中获得任何异步存储日志。您能否发布我如何获取所有异步存储日志?我已经在我的 reactotron 配置中完成了 use(asyncStorage())。
    • @gamingumar 我可能会迟到,但我已经使用 Reactotron 自定义命令来做到这一点:Reactotron.onCustomCommand('show_async_storage', () =>{ //here you could log all the async storage as needed }) 要进行实际日志记录,您可以使用 @skantus 答案。这是一个解释 Reactotron 上的自定义命令的视频video
    【解决方案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;
        });
      });
    });
    

    【讨论】:

    • 谢谢。我只是想快速检查一些东西,而且效果很好。
    【解决方案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);
        })
      });
    }
    

    【讨论】:

    • 很有帮助。谢谢
    【解决方案5】:

    使用bluebird,您可以这样做:

    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));
    

    【讨论】:

    • 因为你使用的是箭头函数,你可以使用速记箭头函数:你可以用a => {return b=>{return c}}代替a=>b=>c
    【解决方案6】:

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

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

    【讨论】:

      【解决方案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
          })
        })
      }
      

      虽然性能不佳,但可以解决问题。

      【讨论】:

        【解决方案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
            }
        }
        

        【讨论】:

          【解决方案9】:

          反应原生调试器
          右键单击可用空间

          【讨论】:

          猜你喜欢
          • 2019-02-18
          • 2020-03-09
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2017-09-01
          • 2022-11-30
          • 2016-06-06
          • 1970-01-01
          相关资源
          最近更新 更多