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

来源：互联网发布：seo视频教程百度云编辑：程序博客网时间：2024/06/05 03:18

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

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

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

创建一个js文件RNAsyncStoragelet 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返回最新数据

Untitled14.gif

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

2.1：设置storage.sync

创建一个js文件RNAsyncStorage_asyn//从RNAsyncStorage文件导出storagelet 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);        });    }};//导出ssssexports.ssss = ssss;

这里的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的打印数据

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

Untitled15.gif

作者：煎包小混沌
链接：http://www.jianshu.com/p/0d2b95293e64
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

阅读全文

0 0