React-native 之 AsyncStorage學習

asyncstorage 是react-native 用來做異步存儲使用的 ，它的所有的api都有一個回調方法，回調方法的第一個參數是error，顯示錯誤資訊，如果沒有錯誤則為 null ，asyncstorage 傳回的都是一個promise

對象 ，一下是一些比較常用到的api

static getitem(key:string , callback:(error,result)): 根據鍵來擷取值，擷取的結果會在回調函數中。

static setitem(key:string , value:string , callback:(error)): 設定鍵值對。

static removeitem(key:string , callback:(error)): 将根據鍵移出一項

static mergeitem:(key:string , value:string , callback:(error)): 合并現有的值和輸入值。

static clear(callback:(error)): 清除所有的項目。

static getallkeys(callback:(error)): 擷取所有的鍵。

static multiget(keys,callback:(errors,result)):擷取多項，其中keys是字元串數組。

static multiset(keyvaluepairs,callback:(errors)):設定多項，其中keyvaluepairs是字元串的二維數組。

static multiremove(keys,callback(errors)):删除多項，其中keys是字元串數組。

static multimerge(keyvaluepairs,callback:(errors)):多個鍵值合并，其中keyvaluepairs是字元串中的二維數組。

<code>'use strict'</code><code>;</code>

<code>import react, {</code>

<code>  </code><code>appregistry,</code>

<code>  </code><code>component,</code>

<code>  </code><code>stylesheet,</code>

<code>  </code><code>text,</code>

<code>  </code><code>view,</code>

<code>  </code><code>asyncstorage,</code>

<code>  </code><code>touchablehighlight,</code>

<code>} from</code><code>'react-native'</code><code>;</code>

<code>var</code>

<code>storage_key_one =</code><code>'@asyncstoragedemo:key_one'</code><code>;</code>

<code>storage_key_message =</code><code>'@asyncstoragedemo:key_message'</code><code>;</code>

<code>//簡單封裝一個元件</code>

<code>class custombutton extends react.component {</code>

<code>  </code><code>render() {</code>

<code>    </code><code>return</code>

<code>(</code>

<code>      </code><code>&lt;touchablehighlight</code>

<code>        </code><code>style={styles.button}</code>

<code>        </code><code>underlaycolor=</code><code>"#a5a5a5"</code>

<code>        </code><code>onpress={</code><code>this</code><code>.props.onpress}&gt;</code>

<code>        </code><code>&lt;text style={styles.buttontext}&gt;{</code><code>this</code><code>.props.text}&lt;/text&gt;</code>

<code>      </code><code>&lt;/touchablehighlight&gt;</code>

<code>    </code><code>);</code>

<code>  </code><code>}</code>

<code>}</code>

<code>class asyncstoragedemo extends component {</code>

<code>  </code><code>constructor(props){</code>

<code>    </code><code>super</code><code>(props);</code>

<code>    </code><code>this</code><code>.state={</code>

<code>        </code><code>messages:[],</code>

<code>    </code><code>};</code>

<code>  </code><code>//元件挂載之後回調方法</code>

<code>  </code><code>componentdidmount(){</code>

<code>       </code><code>this</code><code>._loadinitialstate().done();</code>

<code>  </code><code>//初始化資料-預設從asyncstorage中擷取資料</code>

<code>  </code><code>async _loadinitialstate(){</code>

<code>       </code><code>try</code><code>{</code>

<code>          </code><code>var</code>

<code>value=await asyncstorage.getitem(storage_key_one);</code>

<code>          </code><code>if</code><code>(value!=</code><code>null</code><code>){</code>

<code>            </code><code>this</code><code>._appendmessage(</code><code>'從存儲中擷取到資料為:'</code><code>+value);</code>

<code>          </code><code>}</code><code>else</code><code>{</code>

<code>            </code><code>this</code><code>._appendmessage(</code><code>'存儲中無資料,初始化為空資料'</code><code>);</code>

<code>          </code><code>}</code>

<code>       </code><code>}</code><code>catch</code><code>(error){</code>

<code>            </code><code>this</code><code>._appendmessage(</code><code>'asyncstorage錯誤'</code><code>+error.message);</code>

<code>       </code><code>}</code>

<code>  </code><code>//進行儲存資料_one</code>

<code>  </code><code>async _savevalue_one(){</code>

<code>      </code><code>try</code><code>{</code>

<code>         </code><code>await asyncstorage.setitem(storage_key_one,</code><code>'我是老王'</code><code>);</code>

<code>         </code><code>this</code><code>._appendmessage(</code><code>'儲存到存儲的資料為:'</code><code>+</code><code>'我是老王'</code><code>);</code>

<code>      </code><code>}</code><code>catch</code><code>(error){</code>

<code>         </code><code>this</code><code>._appendmessage(</code><code>'asyncstorage錯誤'</code><code>+error.message);</code>

<code>      </code><code>}</code>

<code>  </code><code>//進行存儲資料删除_one</code>

<code>  </code><code>async _removevalue_one(){</code>

<code>         </code><code>await asyncstorage.removeitem(storage_key_one);</code>

<code>         </code><code>this</code><code>._appendmessage(</code><code>'資料删除成功...'</code><code>);</code>

<code>  </code><code>//進行把message資訊添加到messages數組中</code>

<code>  </code><code>_appendmessage(message){</code>

<code>     </code><code>this</code><code>.setstate({messages:</code><code>this</code><code>.state.messages.concat(message)});</code>

<code>      </code><code>&lt;view&gt;</code>

<code>        </code><code>&lt;text style={styles.welcome}&gt;</code>

<code>           </code><code>asyncstorage使用執行個體</code>

<code>        </code><code>&lt;/text&gt;</code>

<code>        </code><code>&lt;custombutton text=</code><code>'點選存儲資料_我是老王'</code>

<code>onpress={</code><code>this</code><code>._savevalue_one}/&gt;</code>

<code>        </code><code>&lt;custombutton text=</code><code>'點選删除資料'</code>

<code>onpress={</code><code>this</code><code>._removevalue_one}/&gt;</code>

<code>        </code><code>&lt;text style={styles.content}&gt;資訊為:&lt;/text&gt;</code>

<code>        </code><code>{</code><code>this</code><code>.state.messages.map((m) =&gt; &lt;text style={styles.content} key={m}&gt;{m}&lt;/text&gt;)}</code>

<code>      </code><code>&lt;/view&gt;</code>

<code>const styles = stylesheet.create({</code>

<code>  </code><code>welcome: {</code>

<code>    </code><code>fontsize: 14,</code>

<code>    </code><code>textalign:</code><code>'left'</code><code>,</code>

<code>    </code><code>margin: 10,</code>

<code>  </code><code>},</code>

<code>  </code><code>content:{</code>

<code>    </code><code>fontsize: 13,</code>

<code>   </code><code>button: {</code>

<code>    </code><code>margin:5,</code>

<code>    </code><code>backgroundcolor:</code><code>'white'</code><code>,</code>

<code>    </code><code>padding: 15,</code>

<code>    </code><code>borderbottomwidth: stylesheet.hairlinewidth,</code>

<code>    </code><code>borderbottomcolor:</code><code>'#cdcdcd'</code><code>,</code>

<code>});</code>

<code>appregistry.registercomponent(</code><code>'asyncstoragedemo'</code><code>, () =&gt; asyncstoragedemo);</code>