react native AsyncStorage的使用
如果现在有一个需求,是要把用户的账号密码保存到本地,大家会怎么做的呢?如果在android中,我相信一大部分人会想到SharedPreferences,这是一个以键值对的形式进行存储的。那如果在react native中呢,有没有一个像SharedPreferences一样的轻量存储器呢?答案是有的---AsyncStorage。
AsyncStorage是一个简单的、异步的、持久化的Key-Value存储系统,它对于App来说是全局性的。这是官网上对它的介绍。可以知道,这个asyncstorage也是以键值对的形式进行存储数据的。
那么问题来了,该怎么使用这个呢?官网上说并不推荐我们直接用这个asyncstorage,而是进行抽象封装以后在进行调用。首先看一看我在项目中的用法。
上代码:
import React, {
AsyncStorage
}from 'react-native';
class DeviceStorage {
/**
* 获取
* @param key
* @returns {Promise<T>|*|Promise.<TResult>}
*/
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 {Promise<T>|Promise.<TResult>}
*/
static update(key, value) {
return DeviceStorage.get(key).then((item) => {
value = typeof value === 'string' ? value : Object.assign({}, item, value);
return AsyncStorage.setItem(key, JSON.stringify(value));
});
}
/**
* 更新
* @param key
* @returns {*}
*/
static delete(key) {
return AsyncStorage.removeItem(key);
}
}
export default DeviceStorage;
可以看到asyncstorage中存在有更删改查这些方法,当然,上面是把asyncstorage进行了封装,在其他地方调用的时候就可以作为一个工具进行调用了。
调用方式:
//appHotSearchTagList就是当时保存的时候所保存的key,而tags就是保存的值
Storage.get('appHotSearchTagList').then((tags) => {
this.setState({
tags: tags
})
});
这里我只是贴出了一种获取数据的方式,其实另外的更新,删除,保存,方式都是差不多。
react native AsyncStorage的使用的更多相关文章
- React Native之数据存储技术AsyncStorage
1. 如何将数据存储到本地? 数据存储是开发APP必不可少的一部分,比如页面缓存,从网络上获取数据的本地持久化等,那么在RN中如何进行数据存储呢? RN官方推荐我们在RN中使用AsyncStorage ...
- React Native之持久化存储(AsyncStorage、react-native-storage)的使用
AsyncStorage是一个简单的.异步的.持久化的Key-Value存储系统,它对于App来说是全局性的.这是官网上对它的介绍.可以知道,这个asyncstorage也是以键值对的形式进行存储数据 ...
- [RN] React Native 使用 AsyncStorage 存储 缓存数据
React Native 使用 AsyncStorage 存储 缓存数据 AsyncStorage是一个简单的.异步的.持久化的Key-Value存储系统,它对于App来说是全局性的.这是官网上对它的 ...
- React Native中的网络请求fetch和简单封装
React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...
- 腾讯优测优分享 | 探索react native首屏渲染最佳实践
腾讯优测是专业的移动云测试平台,旗下的优分享不定时提供大量移动研发及测试相关的干货~ 此文主要与以下内容相关,希望对大家有帮助. react native给了我们使用javascript开发原生app ...
- 探索react native首屏渲染最佳实践
文 / 腾讯 龚麒 0.前言 react native给了我们使用javascript开发原生app的能力,在使用react native完成兴趣部落安卓端发现tab改造后,我们开始对由react n ...
- React Native专题
转载注明出处:地址:http://www.lcode.org本文出自:[江清清的技术专栏]本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶 ...
- 基于React Native的58 APP开发实践
React Native在iOS界早就炒的火热了,随着2015年底Android端推出后,一套代码能运行于双平台上,真正拥有了Hybrid框架的所有优势.再加上Native的优秀性能,让越来越多的公司 ...
- React Native 网络层分析
文:志俊(沪江Web前端) 本文原创,转载请注明作者及出处 在使用React Native开发中,我们熟练的采用JavaScript的方式发送请求的方式发送一个请求到服务端,但是处理这个请求的过程其实 ...
随机推荐
- Fedora20-64bit cross-compiling arm-linux-gcc
0按照友善之臂的手册建立交叉编译环境时,添加用户变量,最好是去更改 profile 文件 因为 profile 是所有用户都可以使用的,类似于 windows 中的系统变量 而 .bashrc 只有该 ...
- net.sf.json.JSONException: There is a cycle in the hierarchy!的解决办法
使用Hibernate manytoone属性关联主表的时候,如果使用JSONArray把pojo对象转换成json对象时,很容易出现循环的异常.解决的办法就是, 在转换json对象时忽略manyto ...
- SQL Server 2008在Windows 10上不支持
https://support.microsoft.com/en-us/kb/2681562 For SQL Server 2008 R2 SQL Server 2008 R2 is not supp ...
- 报错com/android/dx/command/dexer/Main : Unsupported major.minor version 52.0
看着错误信息应该是从高版本换成低版本报的错误,然而我的JDK并没有变动.会像昨天走之前干了什么? 自己在AndroidStudio上倒弄自己的小项目,更新了build tools到24了 删除24,e ...
- 【转】将Oracle数据库设置为归档模式
查看归档状态为非归档sys@JSSBOOK> select log_mode from v$database;LOG_MODE------------NOARCHIVELOG archive状态 ...
- MVC-命名空间“System.Web.Mvc”中不存在类型或命名空间名称“Html”(是否缺少程序集引用?)
如上截图,明明引用了“System.web.mvc”,可是还出这样的错误. 解决方法: 1.右键引用的“System.Web.Mvc” 2.<复制本地>一样选择<True> 3 ...
- 深度学习笔记——PCA原理与数学推倒详解
PCA目的:这里举个例子,如果假设我有m个点,{x(1),...,x(m)},那么我要将它们存在我的内存中,或者要对着m个点进行一次机器学习,但是这m个点的维度太大了,如果要进行机器学习的话参数太多, ...
- Java的垃圾回收和内存分配策略
本文是<深入理解Java虚拟机 JVM高级特性与最佳实践>的读书笔记 在介绍Java的垃圾回收方法之前,我们先来了解一下Java虚拟机在执行Java程序的过程中把它管理的内存划分为若干个不 ...
- excel使用技巧
1,如何得到开口向下的大括号 1,插入左右方向的大括号. 2,点击绘制的大括号,旋转出现绿点,旋转90度,即可. 问题2:Excel如何截图 1,选中截图内容,选择复制->复制为图片->( ...
- Volley框架使用笔记
1.初始化请求队列 RequestQueue RequestQueue queue= Volley.newRequestQueue(context); 2.StringRequest 网络请求 Get ...