React Native - How to see what's stored in AsyncStorage?

Question

I save some items to AsyncStorage in React Native and I am using chrome debugger and iOS simulator.

Without react native, using regular web development localStorage, I was able to see the stored localStorage items under Chrome Debugger > Resources > Local Storage

Any idea how can I view the React Native AsyncStorage stored items?

Answer 1

React Native Debugger has this built in.

Just call showAsyncStorageContentInDev() in the RND console and you'll be able to see a dump of your app's storage.

Answer 2

You can use reactotron i think it has Async Storage explorer ;) https://github.com/infinitered/reactotron

Answer 3

Following should work,

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

I have created a helper method to log all Storage in a single object (more clean to log for example in 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

react native debugger
right click on free space

Answer 6

With bluebird you can do this:

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

Maybe late, but none of these solutions fit for me. On android, with Android Studio open file explorer then go to data/data/your_package_name Inside you should have a folder called database and inside a file RKStorage.

This file is a SQLite3 file so get your favorite SQLite explorer and explore. If you want one this one does the job : DB Browser for SQLite

Answer 8

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

export const printAsyncStorage = () => {
  AsyncStorage.getAllKeys((err, keys) => {
    AsyncStorage.multiGet(keys, (error, stores) => {
      let asyncStorage = {}
      stores.map((result, i, store) => {
        asyncStorage[store[i][0]] = store[i][1]
      });
      console.table(asyncStorage)
    });
  });
};

enter image description here

Answer 9

I did not find Reactotron to have any type of pretty printing enabled and it's also brutally latent so I just wrote a simple function using lodash. You could use underscore too.

Assuming you have a static mapping of all your keys...

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

It's not performant but it solves the problem.

Answer 10

You can Define function to get all keys by using async and 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 11

I have a expo snack that shows this and also performs a "load". So it is useful for doing a dump of the contents and storing it to a file and loading it up later.

Here are they parts.

const keys = await AsyncStorage.getAllKeys();
const stores = await AsyncStorage.multiGet(keys);
const data = stores.reduce(
  (acc, row) => ({ ...acc, [row[0]]: row[1] }),
  {}
);

// data now contains a JSONable Javascript object that contains all the data

This ammends the data in the AsyncStorage from a JSON string.

// sample is a JSON string
const data = JSON.parse(sample);
const keyValuePairs = Object.entries(data)
  .map(([key, value]) => [key, value])
  .reduce((acc, row) => [...acc, row], []);
await AsyncStorage.multiSet(keyValuePairs);