文档章节

React Native之数据存储技术AsyncStorage

o
 osc_a22drz29
发布于 2019/03/21 20:50
字数 507
阅读 73
收藏 0

精选30+云产品,助力企业轻松上云!>>>

1. 如何将数据存储到本地?

数据存储是开发APP必不可少的一部分,比如页面缓存,从网络上获取数据的本地持久化等,那么在RN中如何进行数据存储呢?

RN官方推荐我们在RN中使用AsyncStorage进行数据存储

2. 什么是AsyncStorage?

2.1 特点

  • 简单的,异步的,持久化的key-value存储系统
  • AsyncStorage也是React Native官方推荐的数据存储方式,旨在代替LocalStorage

2.2 AsyncStorage在ios中存储的两种情况

  • 如果存储的内容较小,那么AsyncStorage会将存储的内容放在一个序列化的字典
  • 如果存储的内容较大,那么AsyncStorage会将存储的内容放在一个单独的文件

2.3 AsyncStorage在android中存储也分为两种情况:

  • AsyncStorage会将数据存储在RocksDB或者SQLite中,具体存在RocksDB中还是SQLite中这取决于设备支持哪一种存储方式。

3. 如何使用AsyncStorage?

  首先导入AsyncStorage作为RN一个标准组件使用

import AsyncStorage from '@react-native-community/async-storage'; 
//import { AsyncStorage } from 'react-native';

在最新的react-native版本中已经将AsyncStorage分离出去了,然后在android上需要手动link一下,具体参照我写的一篇关于link的文章点击查看手动link教程  

3.1 存储数据

 /**
 *  存储数据
 *
 * @memberof AsyncStorageDemoPage
 */
async doSave() {
            // 用法一
    AsyncStorage.setItem(KEY, this.value, err => {
        err && console.log(err.toString());
     })
    
    // 用法二
    AsyncStorage.setItem(KEY, this.value)
        .catch(err => {
            err && console.log(err.toString());
    })
     // 用法三
    try {
        await AsyncStorage.setItem(KEY, this.value)
    } catch (err) {
        err && console.log(err.toString());
    }
}

3.2 获取数据

 /**
 * 获取数据
 *
 * @memberof AsyncStorageDemoPage
*/
async getData() {
    // 用法一
    AsyncStorage.getItem(KEY, (err, value) => {
        this.setState({
            showText: value
        });
        console.log(value);
        err && console.log(err.toString());
    })
    // 用法二
    AsyncStorage.getItem(KEY)
        .then(value => {
            this.setState({
                showText: value
            })
        })
        .catch(err => {
            err && console.log(err.toString());
        })
    // 用法三
    try {
        const value = AsyncStorage.getItem(KEY);
        this.setState({
            showText: value
        });
    } catch (err) {
        err && console.log(err.toString());
    }
}

3.3 移除数据

/**
* 移除数据
*
* @memberof AsyncStorageDemoPage
*/
async doRemove() {
    // 用法一
    AsyncStorage.removeItem(KEY, err => {
        err && console.log(err.toString());
    })
    // 用法二
    AsyncStorage.removeItem(KEY)
        .catch(err => {
            err && console.log(err.toString());
        })
    // 用法三
    try {
        await AsyncStorage.removeItem(KEY);
    } catch(err) {
        err && console.log(err.toString());
    }
}

3.4 AsyncSorage常用API

点击进入查看官方文档

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
一分钟实现,一个RN持久数据管理器

在React Native开发过程中,总避免不了需要存储一些数据在本地。对于大多数应用只需要存储一些结构简单的数据,如标记位,用户信息等。这时候我们首选择的存储方式就是AsyncStorage,那我们先...

rufeng008
04/29
9
0
一分钟实现,一个RN持久数据管理器

在React Native开发过程中,总避免不了需要存储一些数据在本地。对于大多数应用只需要存储一些结构简单的数据,如标记位,用户信息等。这时候我们首选择的存储方式就是AsyncStorage,那我们先...

18600261549
05/30
0
0
react-native-easy-app 详解与使用之(一) AsyncStorage

react-native-easy-app 是一款为React Native App快速开发提供基础服务的纯JS库(支持 IOS & Android),特别是在从0到1的项目搭建初期,至少可以为开发者减少30%的工作量。 react-native-eas...

18600261549
05/30
0
0
react-native-easy-app 详解与使用之(一) AsyncStorage

react-native-easy-app 是一款为React Native App快速开发提供基础服务的纯JS库(支持 IOS & Android),特别是在从0到1的项目搭建初期,至少可以为开发者减少30%的工作量。 react-native-eas...

osc_wdq5dwoy
06/04
1
0
react-native-easy-app 详解与使用之(一) AsyncStorage

react-native-easy-app 是一款为React Native App快速开发提供基础服务的纯JS库(支持 IOS & Android),特别是在从0到1的项目搭建初期,至少可以为开发者减少30%的工作量。 react-native-eas...

游客xhr2dv7j5ciow
06/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

63. Unique Paths II

题目: 63. Unique Paths II A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The robot can only move either down or right at any p......

JiaMing
56分钟前
46
0
前后端分离了,跨域问题怎么处理?

利用Nginx反向代理解决跨域问题 使用jsonp 来进行解决,不推荐,老项目可以使用此方案,但是发送的http 请求体有大小限制,并且发送方式为get方式,大小限制、不安全。 服务器代理 CORS 请求...

SpringForA
58分钟前
19
0
Hacker News 简讯 2020-07-10

更新时间: 2020-07-10 01:02 Slate Star Codex and Silicon Valley’s War Against the Media - (newyorker.com) 《板岩之星》与硅谷对媒体的战争 得分:102 | 评论:42 US Supreme Court deem......

FalconChen
今天
109
2
如何在Java中将文本追加到现有文件 - How to append text to an existing file in Java

问题: I need to append text repeatedly to an existing file in Java. 我需要将文本重复添加到Java中的现有文件中。 How do I do that? 我怎么做? 解决方案: 参考一: https://stackoom...

fyin1314
昨天
12
0
Eclipse HotKey:如何在选项卡之间切换? - Eclipse HotKey: how to switch between tabs?

问题: How can I switch between opened windows in Eclipse? 如何在Eclipse中打开的窗口之间切换? There is Ctrl + F6 , but it's asking me which one I want, but I want switch it lik......

富含淀粉
昨天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部