React-Native 数据存储之react-native-storage的简单使用

布满荆棘的人生 2022-03-06 16:12 595阅读 0赞

`react-native-storage`是封装好的数据存储组件，安装方法见：[https://github.com/sunnylqm/react-native-storage/blob/master/README-CHN.md][https_github.com_sunnylqm_react-native-storage_blob_master_README-CHN.md]

本文只介绍个人使用的过程：

首先导入组件`import Storage from 'react-native-storage';`  
创建一个全局的`Storage`：

创建一个js文件RNAsyncStorage
    
    let storage = new Storage({
        //最大容量，默认值1000条数据循环存储
        size: 1000,
    
        //存储引擎：RN使用AsyncStorage
        //如果不指定则数据只会保存在内存中，重启后即丢失
        storageBackend: AsyncStorage,
    
        //数据过期时间，默认一整天（1000 * 3600 * 24 毫秒），设为null则永不过期
        defaultExpires: 1000 * 3600 * 24,
    
        //读写时在内存中缓存数据，默认开启
        enableCache: true,
    
        // 如果storage中没有相应数据，或数据已过期，
        // 则会调用相应的sync方法，无缝返回最新数据。
        // sync方法的具体说明会在后文提到
        // 你可以在构造函数这里就写好sync的方法
        // 或是在任何时候，直接对storage.sync进行赋值修改
        // 或是写到另一个文件里，这里require引入
    });
    //导出`storage`
    exports.storage = storage;
    //在这里设置`storage.sync`
    storage.sync = require('./RNAsyncStorage_asyn').ssss;

**注意`storage.sync`的设置放在了创建方法的外面，是因为`RNAsyncStorage_asyn`文件中使用了`storage`，（如果放在创建方法里面，`RNAsyncStorage_asyn`中的`storage`将因为尚未导出`storage`而出现错误）**

### 1：单纯的存储和读取： ###

存储方法：
    _saveData =()=> {
            storage.save({
                key: 'loginState',
                data: {
                    userid: '111 userid',
                },
                //expires为有效时间
                expires: 1000 * 3600
            })
        };

//读取方法
    _readData =()=> {
             storage.load({
                 key: 'loginState',
                 // autoSync(默认为true)意味着在没有找到数据或数据过期时自动调用相应的sync方法
                 autoSync: true,
    
                 // syncInBackground(默认为true)意味着如果数据过期，
                 // 在调用sync方法的同时先返回已经过期的数据。
                 // 设置为false的话，则等待sync方法提供的最新数据(当然会需要更多时间)。
                 syncInBackground: true,
    
                 // 你还可以给sync方法传递额外的参数
                 syncParams: {
                     extraFetchOptions: {
                         // 各种参数
                     },
                     someFlag: true,
                 },
             }).then(ret => {
                 // 如果找到数据，则在then方法中返回
                 // 注意：这是异步返回的结果（不了解异步请自行搜索学习）
                 // 你只能在then这个方法内继续处理ret数据
                 // 而不能在then以外处理
                 // 也没有办法“变成”同步返回
                 // 你也可以使用“看似”同步的async/await语法
    
                 console.log(ret.userid);
                 this.setState({ data: ret.userid});
             }).catch(err => {
                 //如果没有找到数据且没有sync方法，
                 //或者有其他异常，则在catch中返回
                 console.warn(err.message);
                 switch (err.name) {
                     case 'NotFoundError':
                         // TODO;
                         this.setState({ data: 'NotFoundError' });
                         break;
                     case 'ExpiredError':
                         this.setState({ data: 'ExpiredError' });
                         break;
                 }
             })

**这里解释下`syncInBackground`\-----为ture的时候：如果数据过期，在调用`sync`方法的同时先返回已经过期的数据，但`sync`方法结束后不会调用`promise`返回新的数据。为false的时候，会等待等待`sync`方法`promise`返回最新数据**

![Image 1][]

Untitled14.gif

### 2：重点介绍当数据过期，调用`sync`的处理 ###

2.1：设置storage.sync

创建一个js文件RNAsyncStorage_asyn
    
    //从RNAsyncStorage文件导出storage
    let aaa = require('./RNAsyncStorage');
    let storage = aaa.storage;
    
    ssss = {
        // sync方法的名字必须和所存数据的key完全相同
        // 方法接受的参数为一整个object，所有参数从object中解构取出
        // 这里可以使用promise。或是使用普通回调函数，但需要调用resolve或reject。
        user(params){
            let { id, resolve, reject, syncParams: { extraFetchOptions, someFlag } } = params;
            //resolve, reject只有在syncInBackground为false时候才被定义
            console.log('aaaaaaaaaaaaaa' + JSON.stringify(params));
            //{"id":"1001","syncParams":{"extraFetchOptions":{},"someFlag":true}}
            fetch('http://localhost:8010/birds/storage', {
                method: 'GET',
                // body: 'id=' + id,
                ...extraFetchOptions,
            }).then(response => {
                console.log('fetch数据11 === ' + JSON.stringify(response));
                return response.json();
            }).then(json => {
                //{"name":"B","age":18,"tags":["geek1","nerd1","otaku1"]}
                console.log('fetch数据22 === ' + JSON.stringify(json));
                if(json){
                    storage.save({
                        key: 'user',
                        id,
                        data: json,
                        expires: 1000 * 6
                    });
    
                    if (someFlag) {
                        // 根据syncParams中的额外参数做对应处理
                    }
                    console.log('resolve = ' + resolve, resolve);
                    // 成功则调用resolve
                    resolve && resolve(json);
                }
                else{
                    // 失败则调用reject
                    reject && reject(new Error('data parse error'));
                }
            }).catch(err => {
                console.warn('bbbbbbbb' + err);
                reject && reject(err);
            });
        }
    };
    //导出ssss
    exports.ssss = ssss;

**这里的[http://localhost:8010/birds/storage][http_localhost_8010_birds_storage]是一个本地连接，将返回一个json数据，数据格式为`{"name":"B","age":18,"tags":["geek1","nerd1","otaku1"]}`**

2.2：先存储一个数据

//这个对象和上面的http://localhost:8010/birds/storage返回的json数据的格式是一样的
    let userA = {
        name: 'A',
        age: 20,
        tags: [
            'geek',
            'nerd',
            'otaku'
        ]
    };
    将userA这个对象存储起来
    _saveData11 =()=> {
            storage.save({
                key: 'user',  // 注意:请不要在key中使用_下划线符号!
                id: '1001',   // 注意:请不要在id中使用_下划线符号!
                data: userA,
                expires: 1000 * 6
            });
        };

2.3：读取上面的数据

_readData11 =()=> {
            //load 读取
            storage.load({
                key: 'user',
                id: '1001',
                // autoSync(默认为true)意味着在没有找到数据或数据过期时自动调用相应的sync方法
                autoSync: true,
                // syncInBackground(默认为true)意味着如果数据过期，
                // 在调用sync方法的同时先返回已经过期的数据。
                // 设置为false的话，则等待sync方法提供的最新数据(当然会需要更多时间)。
                //这里设置为false，因为我需要返回最新的值
                syncInBackground: false,
    
                // 你还可以给sync方法传递额外的参数
                syncParams: {
                    extraFetchOptions: {
                        // 各种参数
                    },
                    someFlag: true,
                },
            }).then(ret => {
                // 如果找到数据，则在then方法中返回
                console.log('_readData11==' + ret.age);
                this.setState({age: ret.age})
            }).catch(err => {
                // 如果没有找到数据且没有sync方法，
                // 或者有其他异常，则在catch中返回
                console.warn('_readData11 error =' + err.message);
                switch (err.name) {
                    case 'NotFoundError':
                        // TODO;
                        break;
                    case 'ExpiredError':
                        // TODO
                        break;
                }
            })
        }

**上面设置了过期时间为6秒，6秒之后数据过期，将会自动调用RNAsyncStorage\_asyn文件中的方法，然后返回一个新的数据为请求过来的json，并保存起来**

调用storage.sync的打印数据

![Image 1][]

53504076-E39D-4D3C-BD7C-4E18B1D97666.png

![Image 1][]

Untitled15.gif

作者：煎包小混沌  
链接：https://www.jianshu.com/p/0d2b95293e64  
来源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

[https_github.com_sunnylqm_react-native-storage_blob_master_README-CHN.md]: https://link.jianshu.com?t=https://github.com/sunnylqm/react-native-storage/blob/master/README-CHN.md
[Image 1]: 
[http_localhost_8010_birds_storage]: https://link.jianshu.com?t=http://localhost:8010/birds/storage