使用PouchDB来实现React离线应用
最近听到有同学在讨论关于数据上传遇到离线的问题,因此在这里介绍一下PouchDB。
PouchDB 是一个开源的javascript数据库,他的设计借鉴于Apache CouchDB,我们可以使用他来打造浏览器的离线应用。
如果你要使用PouchDB,那么建议你的远程数据库使用CouchDB,那样的话可以更好地协调起来。
建立数据库
const localDB = new PouchDB('docs');
const remoteDB = new PouchDB('http://localhost:5984/docs');
同步本地数据到远程数据库
PouchDB API 提供了方法可以让你备份本地数据到服务器: sync。
live: true
表示如果数据一发生变更,就立即同步到远程服务器。
retry: true
表示如果在离线状态下导致同步失败之后,会自动重新尝试重连,直到连接建立成功为止。该选项在live:true
时生效。代码如下:
const sync = localDB.sync(remoteDB, {
live: true,
retry: true
});
更多关于sync方法的操作,可以参考文档: PouchDB Sync
添加数据
onDocSubmit(doc) {
localDB.put({_id: doc, content: doc, imageUrl: imageUrl})
.catch(console.log.bind(console, 'Error inserting'));
}
更新数据
先查询,再更新,PouchDB的增删查改操作都是异步的,即使操作本地数据库也是异步。
localDB.get('doc1').then(doc =>
db.put({
_id: 'doc1',
_rev: doc._rev,
title: 'zzbo'
})
).then(result =>
// handle result
).catch(err => console.log(err));
删除数据
先查询,再删除
localDB.get('doc1').then(doc =>
db.remove(doc)
).then(result =>
// handle result
).catch(err => console.log(err));
监听数据的变更
当数据库的数据发生增删改时,我们需要通知React来更新UI,那么结合React:
class DocsApp extends Component {
componentDidMount {
localDB.changes({
live: true,
include_docs: true //Include all fields in the doc field
}).on('change', this.handleChange.bind(this))
}
handleChange(change) {
var doc = change.doc;
if (!doc) {
return;
}
if (doc._deleted) {
this.removeDoc(doc);
} else {
this.addDoc(doc);
}
}
addDoc(newDoc) {
if (!_.find(this.state.docs, '_id', newDoc._id)) {
this.setState({
docs: this.state.docs.concat(newDoc)
});
}
}
removeDoc(oldDoc) {
this.setState({
docs: this.state.docs.filter(doc => doc._id !== oldDoc._id)
});
}
}
当用户使用移动网络时,网络环境往往会变得非常复杂,在离线状态时也能让用户得到好的用户体验是一个重要的课题。
全文完
使用PouchDB来实现React离线应用的更多相关文章
- 基于React实现的【绿色版电子书阅读器】,支持离线下载
代码地址如下:http://www.demodashi.com/demo/12052.html MyReader 绿色版电子书阅读器 在线地址:http://myreader.linxins.com ...
- React Native之基于AsyncStorage的离线缓存框架设计
1.为什么要离线缓存? 宏观上来说: 提升用户体验: 我们要为用户提供流畅的APP操作体验,但我们无法保证所有用户的网络流畅度是好的,所以我们需要离线缓存来提升用户体验. 节省流量: 节省流量又分为两 ...
- (原创)PouchDB 图片本地存储(web离线应用)
/* * 参数 * db: 已建或未建数据库 * pouchId: 数据库唯一的主键_id * src: 图片img的DOM对象 * bg: 判断是否是背景图 * */ function addTod ...
- react+webpack+wepack-dev-server的环境中ant design图标离线的方法
1.首先说说我老姜对官方提供的demo的理解, 在理解的过程也学到了不少知识. 上图(图0)展示的官网demo的目录结构,node_modules是自己用node下载的, iconfont中是自己的离 ...
- react native之封装离线缓存框架
请求数据=>本地有无缓存+缓存数据是否过期 =>可用 =>不可用 将代码封装成一个DataStore.js文件, 这里面主要提供:从本地获取数据,从网络获取数据,创建本地时间戳,请求 ...
- react native 入门实践
上周末开始接触react native,版本为0.37,边学边看写了个demo,语法使用es6/7和jsx.准备分享一下这个过程.之前没有native开发和react的使用经验,不对之处烦请指出.希望 ...
- React Native填坑之旅--重新认识RN
如同黑夜里的一道光一样,就这么知道了F8. F8是每年一次Facebook每年一次的开发者大会.每次大会都会release相应的APP,iOS.Android都有.之前都是用Native开发的,但是2 ...
- 使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍
使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍 使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍 来自译者 markzhai:大家也知道最近 ...
- PouchDB:可随时同步的开源JavaScript数据库
PouchDB是一个开源的JavaScript数据库,可以运行在浏览器中.PouchDB的数据存储.处理方式受到了Apache CouchDB的启发(CouchDB是一个面向文档的数据库,可通过Jav ...
随机推荐
- sql server 数据遍历插入表变量
)) DECLARE @str VARCHAR(MAX) ,) ,@start INT ,@end INT ,) SET @str = '1,2,3,4,5,6,7,8' SET @split = ' ...
- Oracle分页存储过程
1.在oracle的sqlplus或其他工具中运行一下pl/sql块建立存储过程 --创建包create or replace package testpackage astype test_curs ...
- SharePreference 工具类封装
import java.util.List;import java.util.Map;import java.util.Set;import com.alibaba.fastjson.JSON;imp ...
- 【转】Oracle Database PSU/CPU
转自: http://www.cnblogs.com/ebs-blog/archive/2011/07/28/2167232.html 1. 什么是PSU/CPU?CPU: Critical Patc ...
- 在ubuntu 16.04系统环境中搭建NAS(samba/iscsi/nfs)
在ubuntu 16.04系统中搭建NAS环境 一.基本配置1:设置静态IPvi /etc/network/interfaces#iface ens32 inet dhcpiface ens32 in ...
- 【转】oracle 监听静态注册举例解析
网上有很多关于oracle 监听静态注册的文章,但大多都是简单说说,并没有详细的例子,这里,将结合linux as3 下的oracle 10gR2.0.1 举一个具体的例子 1.在 $ORACLE_H ...
- C++中数据对齐
大体看了看数据对齐,不知道是否正确,总结如下: struct A { char name; double dHeight; int age; }; sizeof(A) = (1+7+8+4+4) = ...
- ElasticSearch 命令行管理工具Curator
一.背景 elastic官网现在已经大面积升级到了5.x版本,然而针对elasticsearch的命令行管理工具curator现在仍然是4.0版本. 刚开始找到此工具,深深的怕因为版本更迭无法使用,还 ...
- 深入理解Java虚拟机(一)、Java内存区域与内存溢出异常
Java虚拟机所管理的内存包括以下几个运行时数据区: 程序计数器(PCR): 1.是一块较小的内存空间,可以看做是当前线程所执行的字节码的行号指示器 2.为线程私有 3.执行Java方法有PCR,执行 ...
- Cordova系列(一)
1.安装 这里推荐用npm安装cordova,至于npm的安装,网上有很多的.打开命令行,输入 npm install -g cordova 这里就安装了好了最新版的cordova,虽然绝大多数会成功 ...