react-native/website/versioned_docs/0.39/asyncstorage.md

---
id: version-0.39-asyncstorage
title: asyncstorage
original_id: asyncstorage
---
<a id="content"></a><h1><a class="anchor" name="asyncstorage"></a>AsyncStorage <a class="hash-link" href="docs/asyncstorage.html#asyncstorage">#</a></h1><div><div><p><code>AsyncStorage</code> is a simple, unencrypted, asynchronous, persistent, key-value storage
system that is global to the app.  It should be used instead of LocalStorage.</p><p>It is recommended that you use an abstraction on top of <code>AsyncStorage</code>
instead of <code>AsyncStorage</code> directly for anything more than light usage since
it operates globally.</p><p>On iOS, <code>AsyncStorage</code> is backed by native code that stores small values in a
serialized dictionary and larger values in separate files. On Android,
<code>AsyncStorage</code> will use either <a href="http://rocksdb.org/" target="_blank">RocksDB</a> or SQLite
based on what is available.</p><p>The <code>AsyncStorage</code> JavaScript code is a simple facade that provides a clear
JavaScript API, real <code>Error</code> objects, and simple non-multi functions. Each
method in the API returns a <code>Promise</code> object.</p><p>Persisting data:</p><div class="prism language-javascript"><span class="token keyword">try</span> <span class="token punctuation">{</span>
  await AsyncStorage<span class="token punctuation">.</span><span class="token function">setItem<span class="token punctuation">(</span></span><span class="token string">'@MySuperStore:key'</span><span class="token punctuation">,</span> <span class="token string">'I like to save it.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 <span class="token comment" spellcheck="true"> // Error saving data
</span><span class="token punctuation">}</span></div><p>Fetching data:</p><div class="prism language-javascript"><span class="token keyword">try</span> <span class="token punctuation">{</span>
  const value <span class="token operator">=</span> await AsyncStorage<span class="token punctuation">.</span><span class="token function">getItem<span class="token punctuation">(</span></span><span class="token string">'@MySuperStore:key'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">!</span><span class="token operator">==</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
   <span class="token comment" spellcheck="true"> // We have data!!
</span>    console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 <span class="token comment" spellcheck="true"> // Error retrieving data
</span><span class="token punctuation">}</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/asyncstorage.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getitem"></a><span class="methodType">static </span>getItem<span class="methodType">(key, callback?)</span> <a class="hash-link" href="docs/asyncstorage.html#getitem">#</a></h4><div><p>Fetches an item for a <code>key</code> and invokes a callback upon completion.
Returns a <code>Promise</code> object.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>key<br><br><div><span>string</span></div></td><td class="description"><div><p>Key of the item to fetch.</p></div></td></tr><tr><td>[callback]<br><br><div><span>?(error: ?Error, result: ?string) =&gt; void</span></div></td><td class="description"><div><p>Function that will be called with a result if found or
   any error.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setitem"></a><span class="methodType">static </span>setItem<span class="methodType">(key, value, callback?)</span> <a class="hash-link" href="docs/asyncstorage.html#setitem">#</a></h4><div><p>Sets the value for a <code>key</code> and invokes a callback upon completion.
Returns a <code>Promise</code> object.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>key<br><br><div><span>string</span></div></td><td class="description"><div><p>Key of the item to set.</p></div></td></tr><tr><td>value<br><br><div><span>string</span></div></td><td class="description"><div><p>Value to set for the <code>key</code>.</p></div></td></tr><tr><td>[callback]<br><br><div><span>?(error: ?Error) =&gt; void</span></div></td><td class="description"><div><p>Function that will be called with any error.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="removeitem"></a><span class="methodType">static </span>removeItem<span class="methodType">(key, callback?)</span> <a class="hash-link" href="docs/asyncstorage.html#removeitem">#</a></h4><div><p>Removes an item for a <code>key</code> and invokes a callback upon completion.
Returns a <code>Promise</code> object.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>key<br><br><div><span>string</span></div></td><td class="description"><div><p>Key of the item to remove.</p></div></td></tr><tr><td>[callback]<br><br><div><span>?(error: ?Error) =&gt; void</span></div></td><td class="description"><div><p>Function that will be called with any error.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="mergeitem"></a><span class="methodType">static </span>mergeItem<span class="methodType">(key, value, callback?)</span> <a class="hash-link" href="docs/asyncstorage.html#mergeitem">#</a></h4><div><p>Merges an existing <code>key</code> value with an input value, assuming both values
are stringified JSON. Returns a <code>Promise</code> object.</p><p><strong>NOTE:</strong> This is not supported by all native implementations.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>key<br><br><div><span>string</span></div></td><td class="description"><div><p>Key of the item to modify.</p></div></td></tr><tr><td>value<br><br><div><span>string</span></div></td><td class="description"><div><p>New value to merge for the <code>key</code>.</p></div></td></tr><tr><td>[callback]<br><br><div><span>?(error: ?Error) =&gt; void</span></div></td><td class="description"><div><p>Function that will be called with any error.</p></div></td></tr></tbody></table></div><div><br>Example:<div class="prism language-javascript">
<span class="token keyword">let</span> UID123_object <span class="token operator">=</span> <span class="token punctuation">{</span>
 name<span class="token punctuation">:</span> <span class="token string">'Chris'</span><span class="token punctuation">,</span>
 age<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
 traits<span class="token punctuation">:</span> <span class="token punctuation">{</span>hair<span class="token punctuation">:</span> <span class="token string">'brown'</span><span class="token punctuation">,</span> eyes<span class="token punctuation">:</span> <span class="token string">'brown'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">
// You only need to define what will be added or updated
</span><span class="token keyword">let</span> UID123_delta <span class="token operator">=</span> <span class="token punctuation">{</span>
 age<span class="token punctuation">:</span> <span class="token number">31</span><span class="token punctuation">,</span>
 traits<span class="token punctuation">:</span> <span class="token punctuation">{</span>eyes<span class="token punctuation">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> shoe_size<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

AsyncStorage<span class="token punctuation">.</span><span class="token function">setItem<span class="token punctuation">(</span></span><span class="token string">'UID123'</span><span class="token punctuation">,</span> JSON<span class="token punctuation">.</span><span class="token function">stringify<span class="token punctuation">(</span></span>UID123_object<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
  AsyncStorage<span class="token punctuation">.</span><span class="token function">mergeItem<span class="token punctuation">(</span></span><span class="token string">'UID123'</span><span class="token punctuation">,</span> JSON<span class="token punctuation">.</span><span class="token function">stringify<span class="token punctuation">(</span></span>UID123_delta<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
    AsyncStorage<span class="token punctuation">.</span><span class="token function">getItem<span class="token punctuation">(</span></span><span class="token string">'UID123'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">,</span> result<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">
// Console log result:
</span><span class="token comment" spellcheck="true">// =&gt; {'name':'Chris','age':31,'traits':
</span><span class="token comment" spellcheck="true">//    {'shoe_size':10,'hair':'brown','eyes':'blue'}}</span></div></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="clear"></a><span class="methodType">static </span>clear<span class="methodType">(callback?)</span> <a class="hash-link" href="docs/asyncstorage.html#clear">#</a></h4><div><p>Erases <em>all</em> <code>AsyncStorage</code> for all clients, libraries, etc.  You probably
don't want to call this; use <code>removeItem</code> or <code>multiRemove</code> to clear only
your app's keys. Returns a <code>Promise</code> object.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>[callback]<br><br><div><span>?(error: ?Error) =&gt; void</span></div></td><td class="description"><div><p>Function that will be called with any error.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getallkeys"></a><span class="methodType">static </span>getAllKeys<span class="methodType">(callback?)</span> <a class="hash-link" href="docs/asyncstorage.html#getallkeys">#</a></h4><div><p>Gets <em>all</em> keys known to your app; for all callers, libraries, etc.
Returns a <code>Promise</code> object.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>[callback]<br><br><div><span>?(error: ?Error, keys: ?Array&lt;string&gt;) =&gt; void</span></div></td><td class="description"><div><p>Function that will be called the keys found and any error.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="flushgetrequests"></a><span class="methodType">static </span>flushGetRequests<span class="methodType">()</span> <a class="hash-link" href="docs/asyncstorage.html#flushgetrequests">#</a></h4><div><p>Flushes any pending requests using a single batch call to get the data.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="multiget"></a><span class="methodType">static </span>multiGet<span class="methodType">(keys, callback?)</span> <a class="hash-link" href="docs/asyncstorage.html#multiget">#</a></h4><div><p>This allows you to batch the fetching of items given an array of <code>key</code>
inputs. Your callback will be invoked with an array of corresponding
key-value pairs found:</p><div class="prism language-javascript"><span class="token function">multiGet<span class="token punctuation">(</span></span><span class="token punctuation">[</span><span class="token string">'k1'</span><span class="token punctuation">,</span> <span class="token string">'k2'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> cb<span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">&gt;</span> <span class="token function">cb<span class="token punctuation">(</span></span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'k1'</span><span class="token punctuation">,</span> <span class="token string">'val1'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'k2'</span><span class="token punctuation">,</span> <span class="token string">'val2'</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">)</span></div><p>The method returns a <code>Promise</code> object.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>keys<br><br><div><span>Array&lt;string&gt;</span></div></td><td class="description"><div><p>Array of key for the items to get.</p></div></td></tr><tr><td>[callback]<br><br><div><span>?(errors: ?Array&lt;Error&gt;, result: ?Array&lt;Array&lt;string&gt;&gt;) =&gt; void</span></div></td><td class="description"><div><p>Function that will be called with a key-value array of
    the results, plus an array of any key-specific errors found.</p></div></td></tr></tbody></table></div><div><br>Example:<div class="prism language-javascript">AsyncStorage<span class="token punctuation">.</span><span class="token function">getAllKeys<span class="token punctuation">(</span></span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> keys<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
  AsyncStorage<span class="token punctuation">.</span><span class="token function">multiGet<span class="token punctuation">(</span></span>keys<span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">,</span> stores<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
   stores<span class="token punctuation">.</span><span class="token function">map<span class="token punctuation">(</span></span><span class="token punctuation">(</span>result<span class="token punctuation">,</span> i<span class="token punctuation">,</span> store<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment" spellcheck="true"> // get at each store's key/value so you can work with it
</span>     <span class="token keyword">let</span> key <span class="token operator">=</span> store<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
     <span class="token keyword">let</span> value <span class="token operator">=</span> store<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="multiset"></a><span class="methodType">static </span>multiSet<span class="methodType">(keyValuePairs, callback?)</span> <a class="hash-link" href="docs/asyncstorage.html#multiset">#</a></h4><div><p>Use this as a batch operation for storing multiple key-value pairs. When
the operation completes you'll get a single callback with any errors:</p><div class="prism language-javascript"><span class="token function">multiSet<span class="token punctuation">(</span></span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'k1'</span><span class="token punctuation">,</span> <span class="token string">'val1'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'k2'</span><span class="token punctuation">,</span> <span class="token string">'val2'</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span> cb<span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>The method returns a <code>Promise</code> object.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>keyValuePairs<br><br><div><span>Array&lt;Array&lt;string&gt;&gt;</span></div></td><td class="description"><div><p>Array of key-value array for the items to set.</p></div></td></tr><tr><td>[callback]<br><br><div><span>?(errors: ?Array&lt;Error&gt;) =&gt; void</span></div></td><td class="description"><div><p>Function that will be called with an array of any
   key-specific errors found.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="multiremove"></a><span class="methodType">static </span>multiRemove<span class="methodType">(keys, callback?)</span> <a class="hash-link" href="docs/asyncstorage.html#multiremove">#</a></h4><div><p>Call this to batch the deletion of all keys in the <code>keys</code> array. Returns
a <code>Promise</code> object.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>keys<br><br><div><span>Array&lt;string&gt;</span></div></td><td class="description"><div><p>Array of key for the items to delete.</p></div></td></tr><tr><td>[callback]<br><br><div><span>?(errors: ?Array&lt;Error&gt;) =&gt; void</span></div></td><td class="description"><div><p>Function that will be called an array of any key-specific
   errors found.</p></div></td></tr></tbody></table></div><div><br>Example:<div class="prism language-javascript">
<span class="token keyword">let</span> keys <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'k1'</span><span class="token punctuation">,</span> <span class="token string">'k2'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
AsyncStorage<span class="token punctuation">.</span><span class="token function">multiRemove<span class="token punctuation">(</span></span>keys<span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 <span class="token comment" spellcheck="true"> // keys k1 &amp; k2 removed, if they existed
</span> <span class="token comment" spellcheck="true"> // do most stuff after removal (if you want)
</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="multimerge"></a><span class="methodType">static </span>multiMerge<span class="methodType">(keyValuePairs, callback?)</span> <a class="hash-link" href="docs/asyncstorage.html#multimerge">#</a></h4><div><p>Batch operation to merge in existing and new values for a given set of
keys. This assumes that the values are stringified JSON. Returns a
<code>Promise</code> object.</p><p><strong>NOTE</strong>: This is not supported by all native implementations.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>keyValuePairs<br><br><div><span>Array&lt;Array&lt;string&gt;&gt;</span></div></td><td class="description"><div><p>Array of key-value array for the items to merge.</p></div></td></tr><tr><td>[callback]<br><br><div><span>?(errors: ?Array&lt;Error&gt;) =&gt; void</span></div></td><td class="description"><div><p>Function that will be called with an array of any
   key-specific errors found.</p></div></td></tr></tbody></table></div><div><br>Example:<div class="prism language-javascript"><span class="token comment" spellcheck="true">
// first user, initial values
</span><span class="token keyword">let</span> UID234_object <span class="token operator">=</span> <span class="token punctuation">{</span>
 name<span class="token punctuation">:</span> <span class="token string">'Chris'</span><span class="token punctuation">,</span>
 age<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
 traits<span class="token punctuation">:</span> <span class="token punctuation">{</span>hair<span class="token punctuation">:</span> <span class="token string">'brown'</span><span class="token punctuation">,</span> eyes<span class="token punctuation">:</span> <span class="token string">'brown'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">
// first user, delta values
</span><span class="token keyword">let</span> UID234_delta <span class="token operator">=</span> <span class="token punctuation">{</span>
 age<span class="token punctuation">:</span> <span class="token number">31</span><span class="token punctuation">,</span>
 traits<span class="token punctuation">:</span> <span class="token punctuation">{</span>eyes<span class="token punctuation">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> shoe_size<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">
// second user, initial values
</span><span class="token keyword">let</span> UID345_object <span class="token operator">=</span> <span class="token punctuation">{</span>
 name<span class="token punctuation">:</span> <span class="token string">'Marge'</span><span class="token punctuation">,</span>
 age<span class="token punctuation">:</span> <span class="token number">25</span><span class="token punctuation">,</span>
 traits<span class="token punctuation">:</span> <span class="token punctuation">{</span>hair<span class="token punctuation">:</span> <span class="token string">'blonde'</span><span class="token punctuation">,</span> eyes<span class="token punctuation">:</span> <span class="token string">'blue'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">
// second user, delta values
</span><span class="token keyword">let</span> UID345_delta <span class="token operator">=</span> <span class="token punctuation">{</span>
 age<span class="token punctuation">:</span> <span class="token number">26</span><span class="token punctuation">,</span>
 traits<span class="token punctuation">:</span> <span class="token punctuation">{</span>eyes<span class="token punctuation">:</span> <span class="token string">'green'</span><span class="token punctuation">,</span> shoe_size<span class="token punctuation">:</span> <span class="token number">6</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> multi_set_pairs   <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'UID234'</span><span class="token punctuation">,</span> JSON<span class="token punctuation">.</span><span class="token function">stringify<span class="token punctuation">(</span></span>UID234_object<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'UID345'</span><span class="token punctuation">,</span> JSON<span class="token punctuation">.</span><span class="token function">stringify<span class="token punctuation">(</span></span>UID345_object<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
<span class="token keyword">let</span> multi_merge_pairs <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'UID234'</span><span class="token punctuation">,</span> JSON<span class="token punctuation">.</span><span class="token function">stringify<span class="token punctuation">(</span></span>UID234_delta<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'UID345'</span><span class="token punctuation">,</span> JSON<span class="token punctuation">.</span><span class="token function">stringify<span class="token punctuation">(</span></span>UID345_delta<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">]</span>

AsyncStorage<span class="token punctuation">.</span><span class="token function">multiSet<span class="token punctuation">(</span></span>multi_set_pairs<span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
  AsyncStorage<span class="token punctuation">.</span><span class="token function">multiMerge<span class="token punctuation">(</span></span>multi_merge_pairs<span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
    AsyncStorage<span class="token punctuation">.</span><span class="token function">multiGet<span class="token punctuation">(</span></span><span class="token punctuation">[</span><span class="token string">'UID234'</span><span class="token punctuation">,</span><span class="token string">'UID345'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">,</span> stores<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
      stores<span class="token punctuation">.</span><span class="token function">map<span class="token punctuation">(</span></span> <span class="token punctuation">(</span>result<span class="token punctuation">,</span> i<span class="token punctuation">,</span> store<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> key <span class="token operator">=</span> store<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> val <span class="token operator">=</span> store<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span>key<span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">
// Console log results:
</span><span class="token comment" spellcheck="true">// =&gt; UID234 {"name":"Chris","age":31,"traits":{"shoe_size":10,"hair":"brown","eyes":"blue"}}
</span><span class="token comment" spellcheck="true">// =&gt; UID345 {"name":"Marge","age":26,"traits":{"shoe_size":6,"hair":"blonde","eyes":"green"}}</span></div></div></div></div></span></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Storage/AsyncStorage.js">edit the content above on GitHub</a> and send us a pull request!</p><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/asyncstorage.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/AsyncStorageExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> <span class="token punctuation">{</span>
  AsyncStorage<span class="token punctuation">,</span>
  PickerIOS<span class="token punctuation">,</span>
  Text<span class="token punctuation">,</span>
  View
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
<span class="token keyword">var</span> PickerItemIOS <span class="token operator">=</span> PickerIOS<span class="token punctuation">.</span>Item<span class="token punctuation">;</span>

<span class="token keyword">var</span> STORAGE_KEY <span class="token operator">=</span> <span class="token string">'@AsyncStorageExample:key'</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> COLORS <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'red'</span><span class="token punctuation">,</span> <span class="token string">'orange'</span><span class="token punctuation">,</span> <span class="token string">'yellow'</span><span class="token punctuation">,</span> <span class="token string">'green'</span><span class="token punctuation">,</span> <span class="token string">'blue'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

class <span class="token class-name">BasicStorageExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span>
    selectedValue<span class="token punctuation">:</span> COLORS<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    messages<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  <span class="token function">componentDidMount<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_loadInitialState<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">done<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  _loadInitialState <span class="token operator">=</span> async <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">try</span> <span class="token punctuation">{</span>
      <span class="token keyword">var</span> value <span class="token operator">=</span> await AsyncStorage<span class="token punctuation">.</span><span class="token function">getItem<span class="token punctuation">(</span></span>STORAGE_KEY<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">!</span><span class="token operator">==</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>selectedValue<span class="token punctuation">:</span> value<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_appendMessage<span class="token punctuation">(</span></span><span class="token string">'Recovered selection from disk: '</span> <span class="token operator">+</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_appendMessage<span class="token punctuation">(</span></span><span class="token string">'Initialized with no selection on disk.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_appendMessage<span class="token punctuation">(</span></span><span class="token string">'AsyncStorage error: '</span> <span class="token operator">+</span> error<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  <span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> color <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selectedValue<span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      &lt;View<span class="token operator">&gt;</span>
        &lt;PickerIOS
          selectedValue<span class="token operator">=</span><span class="token punctuation">{</span>color<span class="token punctuation">}</span>
          onValueChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onValueChange<span class="token punctuation">}</span><span class="token operator">&gt;</span>
          <span class="token punctuation">{</span>COLORS<span class="token punctuation">.</span><span class="token function">map<span class="token punctuation">(</span></span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>
            &lt;PickerItemIOS
              key<span class="token operator">=</span><span class="token punctuation">{</span>value<span class="token punctuation">}</span>
              value<span class="token operator">=</span><span class="token punctuation">{</span>value<span class="token punctuation">}</span>
              label<span class="token operator">=</span><span class="token punctuation">{</span>value<span class="token punctuation">}</span>
            <span class="token operator">/</span><span class="token operator">&gt;</span>
          <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
        &lt;<span class="token operator">/</span>PickerIOS<span class="token operator">&gt;</span>
        &lt;Text<span class="token operator">&gt;</span>
          <span class="token punctuation">{</span><span class="token string">'Selected: '</span><span class="token punctuation">}</span>
          &lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
            <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selectedValue<span class="token punctuation">}</span>
          &lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
        &lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
        &lt;Text<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
        &lt;Text onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_removeStorage<span class="token punctuation">}</span><span class="token operator">&gt;</span>
          Press here to remove from storage<span class="token punctuation">.</span>
        &lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
        &lt;Text<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
        &lt;Text<span class="token operator">&gt;</span>Messages<span class="token punctuation">:</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
        <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>messages<span class="token punctuation">.</span><span class="token function">map<span class="token punctuation">(</span></span><span class="token punctuation">(</span>m<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> &lt;Text key<span class="token operator">=</span><span class="token punctuation">{</span>m<span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">{</span>m<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
      &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  _onValueChange <span class="token operator">=</span> async <span class="token punctuation">(</span>selectedValue<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>selectedValue<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">try</span> <span class="token punctuation">{</span>
      await AsyncStorage<span class="token punctuation">.</span><span class="token function">setItem<span class="token punctuation">(</span></span>STORAGE_KEY<span class="token punctuation">,</span> selectedValue<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_appendMessage<span class="token punctuation">(</span></span><span class="token string">'Saved selection to disk: '</span> <span class="token operator">+</span> selectedValue<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_appendMessage<span class="token punctuation">(</span></span><span class="token string">'AsyncStorage error: '</span> <span class="token operator">+</span> error<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  _removeStorage <span class="token operator">=</span> async <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">try</span> <span class="token punctuation">{</span>
      await AsyncStorage<span class="token punctuation">.</span><span class="token function">removeItem<span class="token punctuation">(</span></span>STORAGE_KEY<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_appendMessage<span class="token punctuation">(</span></span><span class="token string">'Selection removed from disk.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_appendMessage<span class="token punctuation">(</span></span><span class="token string">'AsyncStorage error: '</span> <span class="token operator">+</span> error<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  _appendMessage <span class="token operator">=</span> <span class="token punctuation">(</span>message<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>messages<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>messages<span class="token punctuation">.</span><span class="token function">concat<span class="token punctuation">(</span></span>message<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

exports<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">'AsyncStorage'</span><span class="token punctuation">;</span>
exports<span class="token punctuation">.</span>description <span class="token operator">=</span> <span class="token string">'Asynchronous local disk storage.'</span><span class="token punctuation">;</span>
exports<span class="token punctuation">.</span>examples <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Basics - getItem, setItem, removeItem'</span><span class="token punctuation">,</span>
    <span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> React<span class="token punctuation">.</span>Element&lt;any<span class="token operator">&gt;</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> &lt;BasicStorageExample <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span></div><div class="embedded-simulator"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&amp;scale=60&amp;autoplay=false&amp;orientation=portrait&amp;deviceColor=white&amp;params=%7B%22route%22%3A%22AsyncStorage%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/appstate.html#content">← Prev</a><a class="docs-next" href="docs/backandroid.html#content">Next →</a></div>