react-native-storage

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

安装

npm install react-native-storage –save

使用说明

配置

Web开发

对于Web开发你需要使用webpackbabel来支持es6模块导入功能。

在webpack的配置中添加如下几行:

  // ...
module: {
loaders: [
// ...
{
test: /\.js?$/,
include: [
// path.join(__dirname, '你自己的js文件路径'),
// path.join(__dirname, 'node_modules/其他需要babel的第三方库'),
path.join(__dirname, 'node_modules/react-native-storage')
],
loader: 'babel',
query: {
cacheDirectory: true,
presets: ['es2015', 'stage-1', 'react'],
plugins: ['transform-runtime']
}
}
]
}

React Native开发

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

导入

import Storage from 'react-native-storage';

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

初始化

import Storage from 'react-native-storage';
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的方法
// 或是在任何时候,直接对storage.sync进行赋值修改
// 或是写到另一个文件里,这里require引入
sync: require('你可以另外写一个文件专门处理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来保存数据(key-only)。这些数据一般是全局独有的,需要谨慎单独处理的数据
// 批量数据请使用key和id来保存(key-id),具体请往后看
// 除非你手动移除,这些数据会被永久保存,而且默认不会过期。
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':
// TODO
break;
}
})

  // 使用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':
// TODO
break;
}
}) // -------------------------------------------------- // 获取某个key下的所有id(仅key-id数据)
storage.getIdsForKey('user').then(ids => {
console.log(ids);
}); // 获取某个key下的所有数据(仅key-id数据)
storage.getAllDataForKey('user').then(users => {
console.log(users);
}); // !! 清除某个key下的所有数据(仅key-id数据)
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中的额外参数做对应处理
} // 成功则调用resolve
resolve && resolve(json.user);
}
else{
// 失败则调用reject
reject && 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参数可能是一个字符串,也可能是一个数组的字符串)。

原文连接

React-Native-Storage使用介绍的更多相关文章

  1. React Native之 ScrollView介绍和使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  2. React Native 之 Touchable 介绍与使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  3. React Native之FlexBox介绍和使用

    # 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...

  4. React Native项目组织结构介绍

    代码组织: 目录结构: . ├── components //组成应用的各个组件 │   ├── Routers.android.js //每个组件若实现不一样,分为android的实现和ios的实现 ...

  5. React Native 之 组件化开发

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  6. 使用Visual Studio Code和typescript 开发调试React Native项目

    关于React Native的详细介绍我就不叙述了,他是使用js构建原声app的开发框架.一次变异多平台运行,非常强大.但是个人不喜欢js的过于灵活(弱类型)的语法.强大的强类型语言Typescrip ...

  7. React Native 教程:001 - 如何运行官方控件示例 App

    原文发表于我的技术博客 本文主要讲解了如何运行 React Native 官方控件示例 App,包含了一些 React Native 的基础知识以及相关环境的配置. 原文发表于我的技术博客 React ...

  8. React Native从入门到放弃之环境搭建

    官网 https://facebook.github.io/react-native/ 中文网站 http://reactnative.cn/ 相关文档 http://www.lcode.org/史上 ...

  9. React Native创建一个APP

    React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 React 抽 ...

  10. React Native v0.4 发布,用 React 编写移动应用

    React Native v0.4 发布,自从 React Native 开源以来,包括超过 12.5k stars,1000 commits,500 issues,380 pull requests ...

随机推荐

  1. axios 发送json数据

    var qs = require('qs'); axios.post(ajaxurl,qs.stringify({ username:'zhangsan', age:'18' })).then(fun ...

  2. Python函数之递归函数

    递归函数的定义:在这个函数里再调用这个函数本身 最大递归深度默认是997或者998,python从内存角度做的限制 优点:代码变简单 缺点:占内存 一:推导年龄 问a的值是多少: a 比 b 小2,b ...

  3. 【TensorFlow】基于ssd_mobilenet模型实现目标检测

    最近工作的项目使用了TensorFlow中的目标检测技术,通过训练自己的样本集得到模型来识别游戏中的物体,在这里总结下. 本文介绍在Windows系统下,使用TensorFlow的object det ...

  4. Facebook的React Native之所以能打败谷歌的原因有7个(ReactNative vs Flutter)

    https://baijiahao.baidu.com/s?id=1611028483072699113&wfr=spider&for=pc 如果你喜欢用(或希望能够用)模板搭建应用, ...

  5. Git强制拉取覆盖本地

    1.多条执行 git fetch --all git reset --hard origin/master git pull 2.单条执行 git fetch --all && git ...

  6. WPF在XAML中实现持续动画的暂停、恢复、停止

    1.动画通过EventTrigger监听按钮的FrameworkElement.Loaded事件,但控件载入时就进行动画, 持续动画通过<BeginStoryboard Name="y ...

  7. ios线程和GCD和队列同步异步的关系

    1.什么是进程? 进程是指在系统中正在运行的一个应用程序.比如同时打开QQ.Xcode,系统就会分别启动2个进程.截图 2.什么是线程? 1).一个进程要想执行任务,必须得有线程(每一个进程至少要有一 ...

  8. bootstrap下jQuery自动完成的样式调整-【jQuery】

    1. 覆盖层调整 在bootstrap的对话框中,当其中的输入项使用了自动完成控件,则其中下拉框中的内容就会被bootstrap对话框的覆盖层遮盖. 为了能够使后面的自动完成的层显示出来,可以使用如下 ...

  9. c_数据结构_链表

    #include<stdio.h> #include<stdlib.h> #define ERROR 0 #define OK 1 #define OVERFLOW -2 ty ...

  10. php 操作数据库

    $datetoday = date('Y-m-d'); $datetime = $thedate; $data_info = $data; $db = array( 'dsn' => 'mysq ...