如果现在有一个需求,是要把用户的账号密码保存到本地,大家会怎么做的呢?如果在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的使用的更多相关文章

  1. React Native之数据存储技术AsyncStorage

    1. 如何将数据存储到本地? 数据存储是开发APP必不可少的一部分,比如页面缓存,从网络上获取数据的本地持久化等,那么在RN中如何进行数据存储呢? RN官方推荐我们在RN中使用AsyncStorage ...

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

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

  3. [RN] React Native 使用 AsyncStorage 存储 缓存数据

    React Native 使用 AsyncStorage 存储 缓存数据 AsyncStorage是一个简单的.异步的.持久化的Key-Value存储系统,它对于App来说是全局性的.这是官网上对它的 ...

  4. React Native中的网络请求fetch和简单封装

    React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...

  5. 腾讯优测优分享 | 探索react native首屏渲染最佳实践

    腾讯优测是专业的移动云测试平台,旗下的优分享不定时提供大量移动研发及测试相关的干货~ 此文主要与以下内容相关,希望对大家有帮助. react native给了我们使用javascript开发原生app ...

  6. 探索react native首屏渲染最佳实践

    文 / 腾讯 龚麒 0.前言 react native给了我们使用javascript开发原生app的能力,在使用react native完成兴趣部落安卓端发现tab改造后,我们开始对由react n ...

  7. React Native专题

    转载注明出处:地址:http://www.lcode.org本文出自:[江清清的技术专栏]本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶 ...

  8. 基于React Native的58 APP开发实践

    React Native在iOS界早就炒的火热了,随着2015年底Android端推出后,一套代码能运行于双平台上,真正拥有了Hybrid框架的所有优势.再加上Native的优秀性能,让越来越多的公司 ...

  9. React Native 网络层分析

    文:志俊(沪江Web前端) 本文原创,转载请注明作者及出处 在使用React Native开发中,我们熟练的采用JavaScript的方式发送请求的方式发送一个请求到服务端,但是处理这个请求的过程其实 ...

随机推荐

  1. mongodb指南

    一.简介 从官网 https://www.mongodb.com/download-center?jmp=nav#community 下载相应平台及版本的 mongodb,解压后的 bin 文件夹中有 ...

  2. HTML5 —— 自学第一课

    1.心得 首先遇见问题要寻根源,而不是将问题抛出:其次要经常查看参考文档.参考示例:学会百度. 2.技能需求 HTML5.XHTML.CSS3.JavaScript.jQuery(jQuery-UI/ ...

  3. eclipse新建web项目开发JSP

    1.创建项目:file---new--Dynamic Web Project 一直选next,到jsp文件目录所在地,打勾默认自动生成web.xml配置文件,也可以自己设置. 创建JSP文件: 选择创 ...

  4. linux系统内核流转浅析

    SJTUBEAR  原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 我们通过简单 ...

  5. web 安全杂谈

    以前写过一篇关于session.cookie的博文,都是简单的介绍.不过session和cookie和网络安全可有着密切的关系. 今天主要从这几个方面总结下最近学到的东西: 1. session 两种 ...

  6. iOS音频解码表格

  7. Eclipse使用技巧

    1,整体缩进 右缩进:选中+Tab 左缩进:选中+ Shift+Tab 2,Ctrl+O列出当前类所有方法和属性

  8. C# IComparable接口、IComparer接口和CompareTo(Object x)方法、Compare()方法

    在项目中经常会用到字符串比较,但是有时候对字符串的操作比较多,规则各异.比如有的地方我们需要用排序规则,有的地方需要忽略大小写,我们该如何写一个比较容易操作的比较方法呢?重新实现IComparer接口 ...

  9. Oracle 文件的导入与导出

    说明:本机使用的是32位oracle,使用的方法是plsql导入与导出 1.导出数据步骤. 1)登陆上plsql后在工具里选择导出用户对象,选择上所有的表在选择保存的路径.点击导出就可以了. 2)上边 ...

  10. Shell 字符串的截取

    直接上代码了. linux-:/.sh #!/bin/sh STR=HelloWorld echo 'STR == ' $STR :} # == } #结果为World } # Use : ${STR ...