[RN] React Native 使用 AsyncStorage 存储 缓存数据
React Native 使用 AsyncStorage 存储 缓存数据
AsyncStorage是一个简单的、异步的、持久化的Key-Value存储系统,它对于App来说是全局性的。这是官网上对它的介绍。可以知道,这个asyncstorage也是以键值对的形式进行存储数据的。 那么问题来了,该怎么使用这个呢?官网上说并不推荐我们直接用这个asyncstorage,而是进行抽象封装以后在进行调用。
封装类 StorageUtil.js 代码如下:
import {AsyncStorage} from 'react-native';
class StorageUtil {
/**
* 获取
* @param key
* @returns {*|Promise<*>|PromiseLike<T | never>|Promise<T | never>}
*/
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 {*}
*/
static update(key, value) {
return AsyncStorage.setItem(key, JSON.stringify(value));
}
/**
* 删除
* @param key
* @returns {*}
*/
static delete(key) {
return AsyncStorage.removeItem(key);
}
/**
* 删除所有配置数据
* @returns {Promise<string>}
*/
static clear() {
return AsyncStorage.clear();
}
}
export default StorageUtil;
使用代码:
let key = 'per';
let person = "hello"; //保存
StorageUtil.save(key, person); //获取
StorageUtil.get(key).then((row)=>{
if(row){
console.log(row)
}else{
console.log("null")
} }); //更新
let person2 = "广州";
StorageUtil.update(key, person2); // StorageUtil.delete(key); //清除所有
StorageUtil.clear(); StorageUtil.get(key).then((row)=>{
if(row){
alert(row);
console.log(row)
}else{
console.log("null")
}
});
本博客地址: wukong1688
本文原文地址:https://www.cnblogs.com/wukong1688/p/10958297.html
转载请著名出处!谢谢~~
[RN] React Native 使用 AsyncStorage 存储 缓存数据的更多相关文章
- [RN] React Native 实现图片预览
[RN] React Native 实现图片预览 效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {I ...
- [RN] React Native 常见基本问题归纳总结
[RN] React Native 常见基本问题归纳总结 本问题总结涉及到版本为: "react": "16.8.3","react-native& ...
- [RN] React Native 关闭所有黄色警告
[RN] React Native 关闭所有黄色警告 console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please u ...
- [RN] React Native 下实现底部标签(支持滑动切换)
上一篇文章 [RN] React Native 下实现底部标签(不支持滑动切换) 总结了不支持滑动切换的方法,此篇文章总结出 支持滑动 的方法 准备工作之类的,跟上文类似,大家可点击上文查看相关内容. ...
- [RN] React Native 幻灯片效果 Banner
[RN] React Native 幻灯片效果 Banner 1.定义Banner import React, {Component} from 'react'; import {Image, Scr ...
- [RN] React Native 常用命令行
[RN] React Native 常用命令行 1.查看当前版本 react-native --version 或 react-native -v 2.创建指定版本的React Native项目 1) ...
- [RN] React Native 实现 类似QQ 登陆页面
[RN] React Native 实现 类似QQ 登陆页面 一.主页index.js 项目目录下index.js /** * @format */ import {AppRegistry} from ...
- React Native之持久化存储(AsyncStorage、react-native-storage)的使用
AsyncStorage是一个简单的.异步的.持久化的Key-Value存储系统,它对于App来说是全局性的.这是官网上对它的介绍.可以知道,这个asyncstorage也是以键值对的形式进行存储数据 ...
- [RN] React Native 获取地理位置
React Native 获取地理位置 实现原理: 1.用 navigator.geolocation.getCurrentPosition 获取到坐标信息 2.调用 高德地图 接口,解析位置数据 ...
随机推荐
- 重温拉格朗日乘子法和KKT条件
在求取有约束条件的优化问题时,拉格朗日乘子法(Lagrange Multiplier) 和KKT条件是非常重要的两个求取方法,对于等式约束的优化问题,可以应用拉格朗日乘子法去求取最优值:如果含有不等式 ...
- UIPath RPA 自动化脚本 机器人从入门到精通
本文链接:https://blog.csdn.net/qq_27256783/article/details/93619818 一.UiPath介绍 UiPath 是RPA(Robotic Proce ...
- jQuery 前端复选框 全选 反选 下拉菜单联动
jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...
- Vue.js前端MVVM框架实战篇
相信大家对vue.js这个前端框架有了一定的了解.想必也想把Vue急切的运用在项目中,看看它的魅力到底有多大?别急,今天我会满足大家的想法. 我们一起来看看“Webpack+Vue”的开发模式相比以往 ...
- centos7快速安装coreDns
1.下载二进制文件 wget https://github.com/coredns/coredns/releases/download/v1.5.0/coredns_1.5.0_linux_amd64 ...
- es聚合后排序
注意: es版本至少6.1以上 语句: GET 76/sessions/_search { "size": 0, "query": { "bool&q ...
- java虚拟机类加载机制和双亲委派模型
java虚拟机类加载机制:虚拟机把描述类的数据从class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的java类型. 类的生命周期是从类被加载到虚拟机内存中,到卸 ...
- Linux系统禁止root账号远程登录
修改配置文件/etc/ssh/sshd_config,去掉PermitRootLogin前的注释,修改值为no,然后重启sshd服务即可 #LoginGraceTime 2m PermitRootLo ...
- Nginx的特性功能-反向代理、负载均衡、缓存、动静分离、平滑升级
反向代理 nginx配置文件 events { } 事件驱动 httpd { } 关于httpd相关的配置 server { } 定义虚拟主机 location { } ...
- Httpd服务入门知识-http协议版本,工作机制及http服务器应用扫盲篇
Httpd服务入门知识-http协议版本,工作机制及http服务器应用扫盲篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Internet与中国 Internet最早来源于美 ...