RactNative---react-native-storage使用

这是一个本地持久存储的封装，可以同时支持react-native(AsyncStorage)和浏览器(localStorage)。ES6语法，promise异步读取，使用jest进行了完整的单元测试。

安装

npm install react-native-storage --save

React Native开发

无需配置直接使用(但要求0.13或更高版本)。

导入

import Storage from 'react-native-storage';
请勿使用require(‘react-native-storage’)语法, 否则在react native 0.16之后的版本中会报错.

初始化

import { AsyncStorage } from 'react-native';
var storage = new Storage({// 最大容量，默认值1000条数据循环存储
size: 1000,// 存储引擎：对于RN使用AsyncStorage，对于web使用window.localStorage// 如果不指定则数据只会保存在内存中，重启后即丢失storageBackend: AsyncStorage,// 数据过期时间，默认一整天（1000 * 3600 * 24 毫秒），设为null则永不过期defaultExpires: 1000 * 3600 * 24, // 读写时在内存中缓存数据。默认启用。enableCache: true,// 如果storage中没有相应数据，或数据已过期，// 则会调用相应的sync方法，无缝返回最新数据。// sync方法的具体说明会在后文提到// 你可以在构造函数这里就写好sync的方法// 或是写到另一个文件里，这里require引入// 或是在任何时候，直接对storage.sync进行赋值修改sync: require('./sync')  // 这个sync文件是要你自己写的
})
// 最好在全局范围内创建一个（且只有一个）storage实例，方便直接调用
// 对于web
// window.storage = storage;
// 对于react native
// global.storage = storage;
// 这样，在此**之后**的任意位置即可以直接调用storage
// 注意：全局变量一定是先声明，后使用
// 如果你在某处调用storage报错未定义
// 请检查global.storage = storage语句是否确实已经执行过了
不了解全局变量的使用？请点这里 https://github.com/sunnylqm/react-native-storage/issues/29

保存、读取和删除

  // 使用key来保存数据。这些数据一般是全局独有的，常常需要调用的。// 除非你手动移除，这些数据会被永久保存，而且默认不会过期。storage.save({key: 'loginState',  // 注意:请不要在key中使用_下划线符号!data: { from: 'some other site',userid: 'some userid',token: 'some token'},// 如果不指定过期时间，则会使用defaultExpires参数// 如果设为null，则永不过期expires: 1000 * 3600});// 读取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({ user: ret });}).catch(err => {//如果没有找到数据且没有sync方法，//或者有其他异常，则在catch中返回console.warn(err.message);switch (err.name) {case 'NotFoundError':// TODO;break;case 'ExpiredError':// TODObreak;}})// 使用key和id来保存数据，一般是保存同类别（key）的大量数据。// 所有这些"key-id"数据共有一个保存上限（无论是否相同key）// 即在初始化storage时传入的size参数。// 在默认上限参数下，第1001个数据会覆盖第1个数据。// 覆盖之后，再读取第1个数据，会返回catch或是相应的sync方法。var userA = {name: 'A',age: 20,tags: ['geek','nerd','otaku']};storage.save({key: 'user',  // 注意:请不要在key中使用_下划线符号!id: '1001',   // 注意:请不要在id中使用_下划线符号!data: userA,expires: 1000 * 60   });//load 读取storage.load({key: 'user',id: '1001'}).then(ret => {// 如果找到数据，则在then方法中返回console.log(ret.userid);}).catch(err => {// 如果没有找到数据且没有sync方法，// 或者有其他异常，则在catch中返回console.warn(err.message);switch (err.name) {case 'NotFoundError':// TODO;break;case 'ExpiredError':// TODObreak;}})// --------------------------------------------------// 获取某个key下的所有id
storage.getIdsForKey('user').then(ids => {console.log(ids);
});// 获取某个key下的所有数据
storage.getAllDataForKey('user').then(users => {console.log(users);
});// !! 清除某个key下的所有数据
storage.clearMapForKey('user');// --------------------------------------------------  // 删除单个数据
storage.remove({key: 'lastPage'
});
storage.remove({key: 'user',id: '1001'
});// !! 清空map，移除所有"key-id"数据（但会保留只有key的数据）
storage.clearMap();

同步远程数据（刷新）

  storage.sync = {// sync方法的名字必须和所存数据的key完全相同// 方法接受的参数为一整个object，所有参数从object中解构取出// 这里可以使用promise。或是使用普通回调函数，但需要调用resolve或reject。user(params){let { id, resolve, reject, syncParams: { extraFetchOptions, someFlag } } = params;fetch('user/', {method: 'GET',body: 'id=' + id,...extraFetchOptions,}).then(response => {return response.json();}).then(json => {//console.log(json);if(json && json.user){storage.save({key: 'user',id,data: json.user});if (someFlag) {// 根据syncParams中的额外参数做对应处理}// 成功则调用resolveresolve && resolve(json.user);}else{// 失败则调用rejectreject && reject(new Error('data parse error'));}}).catch(err => {console.warn(err);reject && reject(err);});}}有了上面这个sync方法，以后再调用storage.load时，如果本地并没有存储相应的user，那么会自动触发storage.sync.user去远程取回数据并无缝返回。storage.load({key: 'user',id: '1002'}).then(...)```读取批量数据```// 使用和load方法一样的参数读取批量数据，但是参数是以数组的方式提供。
// 会在需要时分别调用相应的sync方法，最后统一返回一个有序数组。
storage.getBatchData([{ key: 'loginState' },{ key: 'checkPoint', syncInBackground: false },{ key: 'balance' },{ key: 'user', id: '1009' }
])
.then(results => {results.forEach( result => {console.log(result);    })
})//根据key和一个id数组来读取批量数据
storage.getBatchDataWithIds({key: 'user', ids: ['1001', '1002', '1003']
})
.then( ... ).

这两个方法除了参数形式不同，还有个值得注意的差异。getBatchData会在数据缺失时挨个调用不同的sync方法(因为key不同)。但是getBatchDataWithIds却会把缺失的数据统计起来，将它们的id收集到一个数组中，然后一次传递给对应的sync方法(避免挨个查询导致同时发起大量请求)，所以你需要在服务端实现通过数组来查询返回，还要注意对应的sync方法的参数处理（因为id参数可能是一个字符串，也可能是一个数组的字符串）。

RactNative---react-native-storage使用相关推荐

React Native 轻松集成分享功能（Android 篇）
关于推送的集成请参考这篇文章,关于统计的集成请参考这篇文章,本篇文章将引导你集成分享功能. 在集成插件之前,需要在各大开放平台上成功注册应用,并通过审核(支持 3 个可选的主流平台).支持的平台如下: ...
如何在React Native和Firebase中设置Google登录
Google sign-in is a great login feature to offer to your app's users. It makes it easier for them to ...
这是我最喜欢的使用React Native创建生产级应用程序的技巧
Trust me when I say this, React Native is hard. And it's not the usual hard of what we think hard is ...
【云原生】在 React Native 中使用 AWS Textract 实现文本提取
⭐️ 本文首发自前端修罗场(点击加入),一个专注 Web 技术.答疑解惑.面试辅导.职业发展的社区.现在加入,即可参与打卡挑战,和一群人一起努力.挑战成功即可获取一次免费的模拟面试机会,进而评估知识 ...
电影天堂React Native 客户端V2.0发布
电影天堂React Native 客户端重新开始! 具体更新以https://github.com/XboxYan/DYTT为准. 重新开始两年前发布了第一个版本. 现在, 使用最新的react- ...
微信小程序，一个有局限的类似 React Native 轮子
微信小程序就是一个类似RN的轮子,可以快速开发,有一定的适用场景,但是也有其局限性.(结论是基于微信小程序的示例代码做的解读,可能存在谬误. 文末有好奇心日报小程序的二维码,欢迎围观. 2016年11 ...
微信小程序，一个有局限的类似 React Native 轮子！
微信小程序就是一个类似RN的轮子,可以快速开发,有一定的适用场景,但是也有其局限性.(结论是基于微信小程序的示例代码做的解读,可能存在谬误. 文末有好奇心日报小程序的二维码,欢迎围观. 2016年11 ...
电影天堂React Native客户端V2.0
电影天堂React Native客户端V2.0 DYTT 重新开始免责声明为什么要重新开始呢特色项目依赖安装下载相关截图欢迎页首页功能菜单历史记录收藏主题颜色搜索搜索结果 ...
React Native 实战：构建电商 App
课程介绍 React Native 充分利用了 Facebook 的现有轮子,是一个很优秀的集成作品,使用 RN 即可做到无需编译就能远程热更新 App,再加上友好的开发方式.快到爆炸的开发效率.RN ...
准备发布React Native应用？
你可能已经完成了React Native应用的开发,马上就准备发布出去了.那你还需要为发布app准备什么吗?我指的不是诸如"确保测试通过"或"多做几遍smoke test ...

RactNative---react-native-storage使用

安装

React Native开发

导入

初始化

保存、读取和删除

同步远程数据（刷新）

RactNative---react-native-storage使用相关推荐

最新文章

热门文章