React-Native AsyncStorage文件
1.概述
1.AsyncStorage 是一個簡單的、非同步的、持久化的 Key-Value 儲存系統,它對於 App 來說是全域性性的。它用來代替 LocalStorage。
2.由於它的操作是全域性的,官方建議我們最好針對 AsyncStorage 進行一下抽象的封裝再使用,而且不是直接拿 AsyncStorage 進行使用。
3.AsyncStorage 儲存的位置根據系統的不同而有所差異。iOS 中的儲存類似於 NSUserDefault,通過 plist 檔案存放在裝置中。Android 中會儲存在 RocksDB 或者 SQLite 中,取決於你使用哪個。
2.相關方法
(1)根據鍵來獲取值,獲取的結果會放在回撥函式中。
static getItem(key: string, callback:(error, result))
(2)根據鍵來設定值。
static setItem(key: string, value: string, callback:(error))
(3)根據鍵來移除項。
static removeItem(key: string, callback:(error))
(4)合併現有值和輸入值。
static
mergeItem(key: string, value: string, callback:(error))
(5)清除所有的專案
static clear(callback:(error))
(6)獲取所有的鍵
static getAllKeys(callback:(error, keys))
(7)清除所有進行中的查詢操作。
static flushGetRequests()
(8)獲取多項,其中 keys 是字串陣列,比如:['k1', 'k2']1
static multiGet(keys, callback:(errors, result))
(9)設定多項,其中 keyValuePairs 是字串的二維陣列,比如:[['k1', 'val1'], ['k2', 'val2']]
static multiSet(keyValuePairs, callback:(errors))
(10)刪除多項,其中 keys 是字串陣列,比如:['k1', 'k2']1
static multiRemove(keys, callback:(errors))
(11)多個鍵值合併,其中 keyValuePairs 是字串的二維陣列,比如:[['k1', 'val1'], ['k2', 'val2']]1
static multiMerge(keyValuePairs, callback:(errors))
3.一個簡單的封裝類
import React, {
AsyncStorage
}from 'react-native';
class AS{
/**
* 獲取
* @param key
* @returns {Promise<T>|*|Promise.<TResult>}
*/
static get(key) {
return AsyncStorage.getItem(key).then((value) => {
const jsonValue = JSON.parse(value);
return jsonValue;
});
}
/**
* 儲存
* @param key
* @param value
* @returns {*}
*/
static save(key, value) {
return AsyncStorage.setItem(key, JSON.stringify(value));
}
/**
* 更新
* @param key
* @param value
* @returns {Promise<T>|Promise.<TResult>}
*/
static update(key, value) {
return DeviceStorage.get(key).then((item) => {
value = typeof value === 'string' ? value : Object.assign({}, item, value);
return AsyncStorage.setItem(key, JSON.stringify(value));
});
}
/**
* 更新
* @param key
* @returns {*}
*/
static delete(key) {
return AsyncStorage.removeItem(key);
}
}
export default AS;
相關文章
- 在 react-native 中實現 Promise 和 AsyncStorageReactPromise
- react-nativeReact
- react-native打包React
- React-Native實踐React
- React-Native爬坑React
- react-native TextInput 使用React
- react-native升級React
- react-native 學習心得React
- React-Native 樣式指南React
- react-native環境搭建React
- React-Native學習指南React
- React-native 開發小技巧React
- react-native開發避坑React
- react-native生命週期改造React
- react/react-native效能優化React優化
- React-Native環境搭建(windows)ReactWindows
- React-Native專案總結React
- react-native踩坑之行(一)React
- react-native分組列表SectionListReact
- React-Native iOS Module開發ReactiOS
- react-native 生成二維碼React
- react-native技術的優劣React
- react-native 學習 第一層React
- react-native搭建用例(非CRNA)React
- react-native筆記(flexbox)React筆記Flex
- React-Native從零搭建App(長文)ReactAPP
- react-native 使用leanclound訊息推送React
- react-native 環境搭建(1/4)React
- react-native必備工具(3/4)React
- react-native使用redux 存在的坑ReactRedux
- react-native踩坑的開始!React
- react-native第二彈來了!React
- react-native 路由與選單demoReact路由
- expo react-native視訊播放元件React元件
- react-native android狀態列ReactAndroid
- React-Native學習資料分享React
- react-native 修改專案名稱React
- react-native呼叫native步驟React