最近听到有同学在讨论关于数据上传遇到离线的问题,因此在这里介绍一下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离线应用的更多相关文章

  1. 基于React实现的【绿色版电子书阅读器】,支持离线下载

    代码地址如下:http://www.demodashi.com/demo/12052.html MyReader 绿色版电子书阅读器 在线地址:http://myreader.linxins.com ...

  2. React Native之基于AsyncStorage的离线缓存框架设计

    1.为什么要离线缓存? 宏观上来说: 提升用户体验: 我们要为用户提供流畅的APP操作体验,但我们无法保证所有用户的网络流畅度是好的,所以我们需要离线缓存来提升用户体验. 节省流量: 节省流量又分为两 ...

  3. (原创)PouchDB 图片本地存储(web离线应用)

    /* * 参数 * db: 已建或未建数据库 * pouchId: 数据库唯一的主键_id * src: 图片img的DOM对象 * bg: 判断是否是背景图 * */ function addTod ...

  4. react+webpack+wepack-dev-server的环境中ant design图标离线的方法

    1.首先说说我老姜对官方提供的demo的理解, 在理解的过程也学到了不少知识. 上图(图0)展示的官网demo的目录结构,node_modules是自己用node下载的, iconfont中是自己的离 ...

  5. react native之封装离线缓存框架

    请求数据=>本地有无缓存+缓存数据是否过期 =>可用 =>不可用 将代码封装成一个DataStore.js文件, 这里面主要提供:从本地获取数据,从网络获取数据,创建本地时间戳,请求 ...

  6. react native 入门实践

    上周末开始接触react native,版本为0.37,边学边看写了个demo,语法使用es6/7和jsx.准备分享一下这个过程.之前没有native开发和react的使用经验,不对之处烦请指出.希望 ...

  7. React Native填坑之旅--重新认识RN

    如同黑夜里的一道光一样,就这么知道了F8. F8是每年一次Facebook每年一次的开发者大会.每次大会都会release相应的APP,iOS.Android都有.之前都是用Native开发的,但是2 ...

  8. 使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍

      使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍 使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍 来自译者 markzhai:大家也知道最近 ...

  9. PouchDB:可随时同步的开源JavaScript数据库

    PouchDB是一个开源的JavaScript数据库,可以运行在浏览器中.PouchDB的数据存储.处理方式受到了Apache CouchDB的启发(CouchDB是一个面向文档的数据库,可通过Jav ...

随机推荐

  1. centos7配置wordpress

    1.安装Apache和mariadb yum -y install httpdyum -y install mariadb-server mariadb 2.设置开机启动 systemctl enab ...

  2. [Docker] docker 基础学习笔记2(共6篇)

    febootstrap 是一个自制image的一个第三方的工具,好像他们现在都要用这个.   安装还是挺方便的. yum -y install febootstrap   febootstrap -i ...

  3. ajax实现jsonp跨域接口

    HTML页面代码: <script type="text/javascript"> function UrlSearch(){ var name,value; var ...

  4. js学习随笔

    prompt 提示; parse解析;slice划分,切片;sort排序: 移除样式,removeAttribute("style") document.getElementByI ...

  5. python——请求服务器(http请求和https请求)

    一.http请求 1.http请求方式:get和post get一般用于获取/查询资源信息,在浏览器中直接输入url+请求参数点击enter之后连接成功服务器就能获取到的内容,post请求一般用于更新 ...

  6. 当前界面最上面添加视图(UIWimdow)

    -(void)windowAddPushVc:(UIView *)pushView WithTitle:(NSString *)title { UIWindow *window = [UIApplic ...

  7. NGUI 灰化按钮或图标

    在游戏中某些地方可能需要对按钮进行灰化显示,从而表示不能点击!在网上找了一下有些方法是直接用UITexture+灰化shader去做这件事!另外有些方案写的不太清楚,看不懂!不过也基本都是要使用灰化s ...

  8. Be a new gentleman

    有人说:'生活是个大染缸',对于自制力不强的我深表无奈,时常自省的我虽然徘徊在层次边缘,但还是依着光明一点点靠近: 着装得体(改善消费观念,价值观) 讲个人卫生,保持公共环境卫生 女士优先 与人保持安 ...

  9. C# 动软生成器对应的Access数据库操作类DbHelperOleDb

    using System;using System.Collections;using System.Collections.Specialized;using System.Data;using S ...

  10. 【如何快速的开发一个完整的iOS直播app】(采集篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,首先需要采集主 ...