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 存储 缓存数据的更多相关文章

  1. [RN] React Native 实现图片预览

    [RN] React Native 实现图片预览 效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {I ...

  2. [RN] React Native 常见基本问题归纳总结

    [RN] React Native  常见基本问题归纳总结 本问题总结涉及到版本为: "react": "16.8.3","react-native& ...

  3. [RN] React Native 关闭所有黄色警告

    [RN] React Native 关闭所有黄色警告 console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please u ...

  4. [RN] React Native 下实现底部标签(支持滑动切换)

    上一篇文章 [RN] React Native 下实现底部标签(不支持滑动切换) 总结了不支持滑动切换的方法,此篇文章总结出 支持滑动 的方法 准备工作之类的,跟上文类似,大家可点击上文查看相关内容. ...

  5. [RN] React Native 幻灯片效果 Banner

    [RN] React Native 幻灯片效果 Banner 1.定义Banner import React, {Component} from 'react'; import {Image, Scr ...

  6. [RN] React Native 常用命令行

    [RN] React Native 常用命令行 1.查看当前版本 react-native --version 或 react-native -v 2.创建指定版本的React Native项目 1) ...

  7. [RN] React Native 实现 类似QQ 登陆页面

    [RN] React Native 实现 类似QQ 登陆页面 一.主页index.js 项目目录下index.js /** * @format */ import {AppRegistry} from ...

  8. React Native之持久化存储(AsyncStorage、react-native-storage)的使用

    AsyncStorage是一个简单的.异步的.持久化的Key-Value存储系统,它对于App来说是全局性的.这是官网上对它的介绍.可以知道,这个asyncstorage也是以键值对的形式进行存储数据 ...

  9. [RN] React Native 获取地理位置

    React Native 获取地理位置 实现原理: 1.用  navigator.geolocation.getCurrentPosition 获取到坐标信息 2.调用 高德地图 接口,解析位置数据 ...

随机推荐

  1. 配置 Nginx 反向代理 WebSocket

    用Nginx给网站做反向代理和负载均衡是广泛使用的一种Web服务器部署技术.不仅能够保证后端服务器的隐蔽性,还可以提高网站部署灵活性. 今天我们来讲一下,如何用Nginx给WebSocket服务器实现 ...

  2. C# 连接数据库的配置方法

    写在前面 在项目的开发过程中我门常常遇到会忘记数据库连接的配置的写法的尴尬处境.俗话说,好记性不如烂笔头.所以,mark一下. 1.Sqlserver数据库连接 <connectionStrin ...

  3. 在Asp.Net Core MVC 3.0 视图运行时编译

    在正常情况下,视图在生成的时候就会变为 xxx.Views.dll,在开发的时候,这样很不方便,因为很多的时候,我们只是修改一个样式,调整一些JavaScript代码,这个时候要把项目调试暂停下来,生 ...

  4. 查看Linux内核版本

    您可能因多种原因需要确切知道GNU / Linux操作系统上运行的内核版本. 也许您正在调试与硬件相关的问题,或者了解影响旧内核版本的新安全漏洞,并且您想知道您的内核是否易受攻击. 无论是什么原因,从 ...

  5. redis设计与实现(一)简单动态字符串

    redis是C语言实现的,但redis中的字符串并没有直接用C语言中的字符串表示,而是自己构建了一种简单的动态字符串类型(SDS). 在redis里面,C字符串只用作字面量,用在一些不会修改的地方,e ...

  6. 下拉框等需要显示上下箭头切换的CSS样式

    下拉框等需要显示上下箭头切换的CSS样式   .icon-right, .icon-down, .icon-up { display: inline-block; padding-right: 13r ...

  7. JavaScript 运算符(Operator)

    一.算数运算符 1.加法(+) 表示操作数相加:  处理特殊值规则: 如果两个操作数都是字符串,则将第二个操作数与第一个操作数拼接起来: 如果只有一个操作数是字符串,则将另一个操作数转换为字符串,然后 ...

  8. YUV详解

    YUV格式解析2 又确认了一下H264的视频格式——H264支持4:2:0的连续或隔行视频的编码和解码   YUV(亦称YCrCb)是被欧洲电视系统所采用的一种颜色编码方法(属于PAL).YUV主要用 ...

  9. java InputStream的使用

    package cn.kongxh.io3;import java.io.File ;import java.io.InputStream ;import java.io.FileInputStrea ...

  10. MongoDB Spark Connector 实战指南

    Why Spark with MongoDB? 高性能,官方号称 100x faster,因为可以全内存运行,性能提升肯定是很明显的 简单易用,支持 Java.Python.Scala.SQL 等多种 ...