React Native AsyncStorage本地存儲工具類
更新時間：2017年10月24日 16:58:59 作者：七月_代碼君
這篇文章主要為大家分享了React Native AsyncStorage本地存儲工具類，具有一定的參考價值，感興趣的小伙伴們可以參考一下
利用react-native組件AsyncStorage，通過promise，保存本地數(shù)據(jù)，具體內(nèi)容如下
import {AsyncStorage} from 'react-native';
export default class StorageUtil {
/**
* 保存一個Json對象
* @param key
* @param value
* @param callback
*/
static async saveJsonObject(key, value) {
return await this.saveString(key, JSON.stringify(value));
}
/**
* 獲取一個Json對象
* @param key
* @param defaultObject
*/
static async getJsonObject(key, defaultObject) {
let result=null;
try{
result=await this.getString(key,null);
result=await JSON.parse(result);
}catch (err){
if(defaultObject){
return Promise.resolve(defaultObject);
}else{
return Promise.reject(err);
}
}
return result;
}
/**
* 保存一個值
* @param key
* @param value
*/
static async saveString(key, value) {
if (key != null && value != null) {
//Key 與Value 都不為空
try {
await AsyncStorage.setItem(key, value)
} catch (err) {
return Promise.reject(err)
}
return Promise.resolve(true);
} else {
return Promise.reject({"msg": "Key and value can not be null"});
}
}
/**
* 獲取一個值
* @param key
* @param defaultValue
*/
static async getString(key, defaultValue) {
let result = null;
let noDataError = {"msg": "No value found !"};
if (key != null) {
result = await AsyncStorage.getItem(key);
// console.log('get string result',result,defaultValue);
return result ? result : defaultValue!=null ? defaultValue : Promise.reject(noDataError);
} else {
if (defaultValue) {
return Promise.resolve(defaultValue);
} else {
return Promise.reject(noDataError);
}
}
}
/**
* 移除一個值
* @param key
*/
static async remove(key) {
let result = true;
try {
result = await AsyncStorage.removeItem(key);
} catch (err) {
return Promise.reject(err)
}
return result;
}
/**
* 獲取所有已存儲
*/
static async getAllKeys() {
let result=true;
try {
result = await AsyncStorage.getAllKeys();
} catch (err) {
return Promise.reject(err)
}
return result;
}
}
外界調(diào)用
保存
StorageUtil.saveJsonObject(KEY_LOCAL_USER_INFO, user);
讀取
StorageUtil.getJsonObject(KEY_LOCAL_USER_INFO).then(data=>{console.log(data))}
清除
StorageUtil.remove(KEY_LOCAL_USER_INFO)
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在 React 中,可以通過 JavaScript 的條件語句來動態(tài)渲染組件或元素,下面給大家分享幾種常用的在 React 中處理條件渲染的方法,感興趣的朋友跟隨小編一起看看吧2024-08-08
這篇文章主要介紹了react項目使用redux初始化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
下面小編就為大家?guī)硪黄獪\談react.js中實現(xiàn)tab吸頂效果的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
React中使用ResizeObserver來觀察元素size變化的方法
在 React 中使用 ResizeObserver 來觀察元素的大小變化,可以通過創(chuàng)建一個自定義 Hook 來封裝 ResizeObserver 的邏輯,并在組件中使用這個 Hook,以下是一個完整的示例,展示了如何在 React 中使用 ResizeObserver 來觀察元素的大小變化,需要的朋友可以參考下2024-12-12
React+Typescript項目環(huán)境搭建并使用redux環(huán)境的詳細(xì)過程
這篇文章主要介紹了React+Typescript項目環(huán)境搭建并使用redux環(huán)境的詳細(xì)過程,本文通過圖文實例相結(jié)合給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
react進(jìn)階教程之異常處理機(jī)制error?Boundaries
在react中一旦出錯,如果每個組件去處理出錯情況則比較麻煩,下面這篇文章主要給大家介紹了關(guān)于react進(jìn)階教程之異常處理機(jī)制error?Boundaries的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
React.js入門實例教程之創(chuàng)建hello world 的5種方式
React 是近期非常熱門的一個前端開發(fā)框架。應(yīng)用非常廣泛，接下來通過本文給大家介紹React.js入門實例教程之創(chuàng)建hello world 的5種方式 ，需要的朋友參考下吧2016-05-05
通過實例學(xué)習(xí)React中事件節(jié)流防抖
這篇文章主要介紹了通過實例學(xué)習(xí)React中事件節(jié)流防抖，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，,需要的朋友可以參考下2019-06-06
React通過useContext特性實現(xiàn)組件數(shù)據(jù)傳遞
本文主要介紹了React如何通過useContext特性實現(xiàn)組件數(shù)據(jù)傳遞，文中有相關(guān)的代碼示例供大家參考，對我們學(xué)習(xí)React有一定的幫助,需要的朋友可以參考下2023-06-06
React Native基礎(chǔ)入門之調(diào)試React Native應(yīng)用的一小步
這篇文章主要給大家介紹了關(guān)于React Native基礎(chǔ)入門之調(diào)試React Native應(yīng)用的相關(guān)資料，文中通過圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07