React-Native AsyncStorage存儲key管理小技巧


本文出自《React Native 每日一學(Learn a little

every day)》欄目。



AsyncStorage存儲key管理小技巧



場景


AsyncStorage是React Native推薦的數據存儲方式。當我們需要根據條件從本地查詢出多條記錄時,你會想到來一個select

* from xx where xx
。但是很不幸的告訴你,AsyncStorage 是不支持sql的,因為AsyncStorage是Key-Value存儲系統。


那麼如何才能快速的從眾多記錄中將符合條件的記錄查詢出來呢? 請往下看…



AsyncStorage key管理


為瞭方便查詢多條符合規則的記錄,我們可以在保存數據前,對這條數據進行分類,然後記錄下這條記錄的key。下次再查詢該數據前,隻需要先查詢之前保存的key,然後通過 static

multiGet(keys, callback?) 
API,將符合規則的數據一並查詢出來。



用例


保存數據


第一步:保存數據


  saveFavoriteItem(key,vaule,callback) {
AsyncStorage.setItem(key,vaule,(error,result)=>{
if (!error) {//更新Favorite的key
this.updateFavoriteKeys(key,true);
}
});
}

第二步:更新key


/**
* 更新Favorite key集合
* @param isAdd true 添加,false 刪除
* **/
updateFavoriteKeys(key,isAdd){
AsyncStorage.getItem(this.favoriteKey,(error,result)=>{
if (!error) {
var favoriteKeys=[];
if (result) {
favoriteKeys=JSON.parse(result);
}
var index=favoriteKeys.indexOf(key);
if(isAdd){
if (index===-1)favoriteKeys.push(key);
}else {
if (index!==-1)favoriteKeys.splice(index, 1);
}
AsyncStorage.setItem(this.favoriteKey,JSON.stringify(favoriteKeys));
}
});
}


查詢批量數據


第一步:查詢key


getFavoriteKeys(){//獲取收藏的Respository對應的key
return new Promise((resolve,reject)=>{
AsyncStorage.getItem(this.favoriteKey,(error,result)=>{
if (!error) {
try {
resolve(JSON.parse(result));
} catch (e) {
reject(error);
}
}else {
reject(error);
}
});
});
}

第二步:根據key查詢數據


javascript AsyncStorage.multiGet(keys, (err, stores) => { try { stores.map((result,

i, store) => { // get at each store's key/value so you can work with it let key = store[i][0]; let value = store[i][1]; if (value)items.push(JSON.parse(value)); }); resolve(items); } catch (e) { reject(e); } });


以上是我在使用AsyncStorage進行批量數據查詢的一些思路,大傢根據實際情況進行調整。



About


本文出自《React Native 每日一學(Learn a little

every day)》欄目。



瞭解更多,可以關註我的:


GitHub 微博 http://jiapenghui.com



推薦閱讀



  • React Native 學習筆記

  • React Native Awesome(匯聚知識,分享精華):匯集瞭各類react-native學習資料、工具、組件、開源App、資源下載、以及相關新聞等。

0 個評論

要回覆文章請先登錄註冊