使用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 ...
随机推荐
- centos7配置wordpress
1.安装Apache和mariadb yum -y install httpdyum -y install mariadb-server mariadb 2.设置开机启动 systemctl enab ...
- [Docker] docker 基础学习笔记2(共6篇)
febootstrap 是一个自制image的一个第三方的工具,好像他们现在都要用这个. 安装还是挺方便的. yum -y install febootstrap febootstrap -i ...
- ajax实现jsonp跨域接口
HTML页面代码: <script type="text/javascript"> function UrlSearch(){ var name,value; var ...
- js学习随笔
prompt 提示; parse解析;slice划分,切片;sort排序: 移除样式,removeAttribute("style") document.getElementByI ...
- python——请求服务器(http请求和https请求)
一.http请求 1.http请求方式:get和post get一般用于获取/查询资源信息,在浏览器中直接输入url+请求参数点击enter之后连接成功服务器就能获取到的内容,post请求一般用于更新 ...
- 当前界面最上面添加视图(UIWimdow)
-(void)windowAddPushVc:(UIView *)pushView WithTitle:(NSString *)title { UIWindow *window = [UIApplic ...
- NGUI 灰化按钮或图标
在游戏中某些地方可能需要对按钮进行灰化显示,从而表示不能点击!在网上找了一下有些方法是直接用UITexture+灰化shader去做这件事!另外有些方案写的不太清楚,看不懂!不过也基本都是要使用灰化s ...
- Be a new gentleman
有人说:'生活是个大染缸',对于自制力不强的我深表无奈,时常自省的我虽然徘徊在层次边缘,但还是依着光明一点点靠近: 着装得体(改善消费观念,价值观) 讲个人卫生,保持公共环境卫生 女士优先 与人保持安 ...
- C# 动软生成器对应的Access数据库操作类DbHelperOleDb
using System;using System.Collections;using System.Collections.Specialized;using System.Data;using S ...
- 【如何快速的开发一个完整的iOS直播app】(采集篇)
原文转自:袁峥Seemygo 感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,首先需要采集主 ...