數(shù)據(jù)存儲是開發(fā)APP必不可少的一部分,比如頁面緩存,從網(wǎng)絡(luò)上獲取數(shù)據(jù)的本地持久化等趣效,那么在RN中如何進行數(shù)據(jù)存儲呢?
RN官方推薦我們在RN中用AsyncStorage進行數(shù)據(jù)存儲猪贪。
什么是AsyncStorage?
簡單的跷敬,異步的,持久化的key-value存儲系統(tǒng)
AsyncStorage也是Rect Native官方推薦的數(shù)據(jù)存儲方式热押,旨在代替LocalStorage
AsyncStorage在iOS下存儲分兩種情況:
如果存儲的內(nèi)容較小西傀,那么AsyncStorage會將要存儲的內(nèi)容凡在個序列化的字典中;
如果存儲的值較大桶癣,那么AsyncStorage會將存儲的內(nèi)容放在一個單獨的文件中拥褂;
AsyncStorage在Android下的存儲也分兩種情況:
AsyncStorage會將數(shù)據(jù)存儲在 RocksDB 或者 SQLite ,具體存儲在 RocksDB 中還是SQLite中這取決于設(shè)備支持哪一種存儲方式了牙寞。
如何使用AsyncStorage饺鹃?
安裝
npm install @react-native-async-storage/async-storage
npx pod-install //如果你的是Mac系統(tǒng)需要執(zhí)行下pod安裝
使用
import AsyncStorage from '@react-native-async-storage/async-storage';
存儲數(shù)據(jù)
函數(shù)原型
static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void): Promise
實例
/**
* 存儲數(shù)據(jù)
* @returns {Promise.<void>}
*/
async doSave() {
//用法一
AsyncStorage.setItem(KEY, this.value, error => {
error && console.log(error.toString());
});
//用法二
AsyncStorage.setItem(KEY, this.value)
.catch(error => {
error && console.log(error.toString());
});
//用法三
try {
await AsyncStorage.setItem(KEY, this.value);
} catch (error) {
error && console.log(error.toString());
}
}
讀取數(shù)據(jù)
函數(shù)原型
static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void): Promise
示例
/**
* 獲取數(shù)據(jù)
*/
async getData() {
//用法一
AsyncStorage.getItem(KEY, (error, value) => {
this.setState({
showText: value
});
console.log(value);
error && console.log(error.toString());
});
//用法二
AsyncStorage.getItem(KEY)
.then(value => {
this.setState({
showText: value
});
console.log(value);
})
.catch(error => {
error && console.log(error.toString());
});
//用法三
try {
const value = await AsyncStorage.getItem(KEY);
this.setState({
showText: value
});
console.log(value);
} catch (error) {
error && console.log(error.toString());
}
}
刪除數(shù)據(jù)
函數(shù)原型
static removeItem(key: string, [callback]: ?(error: ?Error) => void): Promise
示例
/**
* 刪除數(shù)據(jù)
* @returns {Promise.<void>}
*/
async doRemove() {
//用法一
AsyncStorage.removeItem(KEY,error => {
error && console.log(error.toString());
});
//用法二
AsyncStorage.removeItem(KEY)
.catch(error => {
error && console.log(error.toString());
});
//用法三
try {
await AsyncStorage.removeItem(KEY);
} catch (error) {
error && console.log(error.toString());
}
}
AsyncStorage有那些常用的API?
setItem()
方法原型:static setItem(key: string, value: string, [callback]: ?(error: ?Error) => void)
該方法提供以key,value鍵值對的方式存儲數(shù)據(jù)悔详,方法的第三個參數(shù)是錯誤callback镊屎,可以通過判斷error是否為空來判斷是否保存成功。方法返回一個Promise對象伟端。
getItem()
方法原型:static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void)
該方法用戶獲取存儲的數(shù)據(jù)杯道,方法的第二個參數(shù)是callback(error,result),完成讀取數(shù)據(jù)后會回調(diào)該方责蝠。方法返回一個Promise對象党巾。
removeItem()
方法原型:static removeItem(key: string, [callback]: ?(error: ?Error) => void)
刪除一個字段∷剑可以通過判斷error是否為空來判斷是否保存成功齿拂。方法返回一個Promise對象。