React-Native 之 数据持久化

前言

---

• 因为 实战项目系列 涉及到数据持久化，这边就来补充一下。
• 如本文有错或理解偏差欢迎联系我，会尽快改正更新！
• 如有什么问题，也可直接通过邮箱 277511806@qq.com 联系我。

• demo链接: https://pan.baidu.com/s/1hsspiio 密码: dk3h

数据持久化

---

• 数据持久化一直都是软件开发中重要的一个环节，几乎所有的应用都具备这一项功能；那什么是数据持久化呢？—— 说白了就是数据的本地化存储，将数据存储到本地，在需要的时候进行调用。

• 这边我们介绍两种在 React-Native 中比较常用的存储方式

  • AsyncStorage：这是官方使用的存储方式，类似于 iOS 中的 NSUserDefault ，区别在于，AsyncStorage 只能存储 字符串键值对，而 NSUserDefault 可以存储 字符串和number。
  • Realm：今天才发现 Realm 也已经支持 React-Native ,这是新兴的移动端数据存储方式，在没有它之前，一直都是使用 sqlist 进行数据存储，在性能上，各有优势，但是操作上，Realm 有着明显优势，更方便使用。

• 接下来我们就来看看怎么使用它们。

AsyncStorage 简单使用

---

• AsyncStorage方法官方文档写得很详细，这边就不对赘述了！

• AsyncStorage 使用方法很简单，我们就直接上代码：

    // 增加
    createData() {
        AsyncStorage.setItem('name', JSON.stringify('吉泽明步'), (error, result) => {
            if (!error) {
                this.setState({
                    data:'保存成功!'
                })
            }
        });
    }

    // 查询
    inquireData() {
        AsyncStorage.getItem('name')
            .then((value) => {
                let jsonValue = JSON.parse((value));

                this.setState({
                    data:jsonValue
                })
            })
    }

    // 更新
    upData() {
        AsyncStorage.setItem('name', JSON.stringify('苍井空'), (error, result) => {
            if (!error) {
                this.setState({
                    data:'更新成功!'
                })
            }
        });
    }

    // 删除
    removeData() {
        AsyncStorage.removeItem('name');

        this.setState({
            data:'删除完成!'
        })
    }

• 按照官方推荐，我们使用 AsyncStorage 前，最好进行一层封装，React-Native中文网 给我们提供了一个比较好的框架 —— react-native-storage，我们可以直接使用它,方法很简单，说明文档中说得很详细。

• 既然是第三方框架，那么第一部肯定就是导入到我们的工程中：

    npm install react-native-storage --save

• 接着，我们根据创建一个 Storage 文件专门对框架进行初始化操作：

    import { 
        AsyncStorage, 
    } from 'react-native';

    // 第三方框架
    import Storage from 'react-native-storage';

    var storage = new Storage({
      // 最大容量，默认值1000条数据循环存储
      size: 1000<