AsyncStorage

AsyncStorage is a simple, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.

It is recommended that you use an abstraction on top of AsyncStorage instead of AsyncStorage directly for anything more than light usage since it operates globally.

This JS code is a simple facade over the native iOS implementation to provide a clear JS API, real Error objects, and simple non-multi functions. Each method returns a Promise object.

Methods #

static getItem(key: string, callback?: ?(error: ?Error, result: ?string) => void) #

Fetches key and passes the result to callback, along with an Error if there is any. Returns a Promise object.

static setItem(key: string, value: string, callback?: ?(error: ?Error) => void) #

Sets value for key and calls callback on completion, along with an Error if there is any. Returns a Promise object.

static removeItem(key: string, callback?: ?(error: ?Error) => void) #

Returns a Promise object.

static mergeItem(key: string, value: string, callback?: ?(error: ?Error) => void) #

Merges existing value with input value, assuming they are stringified json. Returns a Promise object. Not supported by all native implementations.

static clear(callback?: ?(error: ?Error) => void) #

Erases all AsyncStorage for all clients, libraries, etc. You probably don't want to call this - use removeItem or multiRemove to clear only your own keys instead. Returns a Promise object.

static getAllKeys(callback?: ?(error: ?Error, keys: ?Array<string>) => void) #

Gets all keys known to the app, for all callers, libraries, etc. Returns a Promise object.

static flushGetRequests() #

Flushes any pending requests using a single multiget

static multiGet(keys: Array<string>, callback?: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void) #

multiGet invokes callback with an array of key-value pair arrays that matches the input format of multiSet. Returns a Promise object.

multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']])

static multiSet(keyValuePairs: Array<Array<string>>, callback?: ?(errors: ?Array<Error>) => void) #

multiSet and multiMerge take arrays of key-value array pairs that match the output of multiGet, e.g. Returns a Promise object.

multiSet([['k1', 'val1'], ['k2', 'val2']], cb);

static multiRemove(keys: Array<string>, callback?: ?(errors: ?Array<Error>) => void) #

Delete all the keys in the keys array. Returns a Promise object.

static multiMerge(keyValuePairs: Array<Array<string>>, callback?: ?(errors: ?Array<Error>) => void) #

Merges existing values with input values, assuming they are stringified json. Returns a Promise object.

Not supported by all native implementations.

Properties #

Edit on GitHubExamples #

'use strict';

var React = require('react-native');
var {
  AsyncStorage,
  PickerIOS,
  Text,
  View
} = React;
var PickerItemIOS = PickerIOS.Item;

var STORAGE_KEY = '@AsyncStorageExample:key';
var COLORS = ['red', 'orange', 'yellow', 'green', 'blue'];

var BasicStorageExample = React.createClass({
  componentDidMount() {
    this._loadInitialState().done();
  },

  async _loadInitialState() {
    try {
      var value = await AsyncStorage.getItem(STORAGE_KEY);
      if (value !== null){
        this.setState({selectedValue: value});
        this._appendMessage('Recovered selection from disk: ' + value);
      } else {
        this._appendMessage('Initialized with no selection on disk.');
      }
    } catch (error) {
      this._appendMessage('AsyncStorage error: ' + error.message);
    }
  },

  getInitialState() {
    return {
      selectedValue: COLORS[0],
      messages: [],
    };
  },

  render() {
    var color = this.state.selectedValue;
    return (
      <View>
        <PickerIOS
          selectedValue={color}
          onValueChange={this._onValueChange}>
          {COLORS.map((value) => (
            <PickerItemIOS
              key={value}
              value={value}
              label={value}
            />
          ))}
        </PickerIOS>
        <Text>
          {'Selected: '}
          <Text style={{color}}>
            {this.state.selectedValue}
          </Text>
        </Text>
        <Text>{' '}</Text>
        <Text onPress={this._removeStorage}>
          Press here to remove from storage.
        </Text>
        <Text>{' '}</Text>
        <Text>Messages:</Text>
        {this.state.messages.map((m) => <Text key={m}>{m}</Text>)}
      </View>
    );
  },

  async _onValueChange(selectedValue) {
    this.setState({selectedValue});
    try {
      await AsyncStorage.setItem(STORAGE_KEY, selectedValue);
      this._appendMessage('Saved selection to disk: ' + selectedValue);
    } catch (error) {
      this._appendMessage('AsyncStorage error: ' + error.message);
    }
  },

  async _removeStorage() {
    try {
      await AsyncStorage.removeItem(STORAGE_KEY);
      this._appendMessage('Selection removed from disk.');
    } catch (error) {
      this._appendMessage('AsyncStorage error: ' + error.message);
    }
  },

  _appendMessage(message) {
    this.setState({messages: this.state.messages.concat(message)});
  },
});

exports.title = 'AsyncStorage';
exports.description = 'Asynchronous local disk storage.';
exports.examples = [
  {
    title: 'Basics - getItem, setItem, removeItem',
    render(): ReactElement { return <BasicStorageExample />; }
  },
];

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills