【学习打卡】第7天 React Native 本地存储
标签:
React Native
课程名称:RN入门到进阶,打造高质量上线App(2022全新升级)
课程章节:3-5 .React Native数据库编程之AsyncStorage精讲
主讲老师:CrazyCodeBoy
课程内容:今天学习的主要内容包括:AsyncStorage的使用和封装
课程收获:
- React Native Async Storage 的安装
使用yarn来进行安装
执行命令
yarn add @react-native-async-storage/async-storage
在Android上不需要额外的操作,因为项目是大于0.60的版本,
在ios上,需要使用CocoaPods 将原生添加到项目中:RNAsyncStorage
npx pod-install
- 用法
Async Storage 是用来进行数据存储的,类型于浏览器的LocalStorage是一个持久化存储的方案。
在使用Async Storage的时候,我们需要对数据进行序列化操作
先导入方法
import AsyncStorage from '@react-native-async-storage/async-storage';
存储数据
setItem
是用来进行数据存储的。
存储字符串
const storeData = async (value) => {
try {
await AsyncStorage.setItem('@storage_Key', value)
} catch (e) {
// saving error
}
}
存储对象
const storeData = async (value) => {
try {
const jsonValue = JSON.stringify(value)
await AsyncStorage.setItem('@storage_Key', jsonValue)
} catch (e) {
// saving error
}
}
获取数据
getItem
是进行数据读取的。如果没有找到存的数据,将会返回一个null
获取字符串数据
const getData = async () => {
try {
const value = await AsyncStorage.getItem('@storage_Key')
if(value !== null) {
// value previously stored
}
} catch(e) {
// error reading value
}
}
获取对象
const getData = async () => {
try {
const jsonValue = await AsyncStorage.getItem('@storage_Key')
return jsonValue != null ? JSON.parse(jsonValue) : null;
} catch(e) {
// error reading value
}
}
- 对存储方法进行封装。
对于数据的存储,使用上述的代码都过于麻烦,我们可以把这些方法封装起来,然后进行调用
代码:
import AsyncStorage from '@react-native-async-storage/async-storage';
export default class StorageUtil {
/**
* 获取数据
* @param key 数据的key值
* @return {Promise<any> | Promise}
*/
static getItem(key: string) {
return new Promise<any>((resolve, reject) => {
AsyncStorage.getItem(key, (error, result) => {
if (error) {
reject(error);
return;
}
// 判断是否是个对象
try {
resolve(JSON.parse(result!));
} catch (e) {
resolve(result);
}
});
});
}
/**
* 保存数据
* @param key
* @param data
*/
static setItem(key: string, data: any) {
data = typeof data === 'object' ? JSON.stringify(data) : data;
AsyncStorage.setItem(key, data, error => {
if (error) {
//Tips.toast('保存失败');
}
});
}
/**
* 删除数据
* @param key
*/
static removeItem(key: string) {
AsyncStorage.removeItem(key, error => {
if (error) {
//Tips.toast('删除失败');
}
});
}
/**
* 删除json文件
*/
static clear() {
AsyncStorage.clear(error => {
if (error) {
//Tips.toast('文件删除失败');
}
});
}
}
今天学习课程加练习一共用了30分钟,主要是学习对React Native本地存储的使用。
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦