我使用” PouchDB”制作了类似Evernote的鸡蛋，可以在线同步脱机数据。

1. PouchDB

概述

" PouchDB"是一个开放源代码数据库，其灵感来自面向文档的数据库" Apache CouchDB"。使用PouchDB，数据在脱机时会保存在本地，并且在联机时会在客户端之间同步数据，因此应用程序用户可以访问最新数据，而不必担心使用环境。它支持与CouchDB兼容的数据库。

2.在远程服务器

上安装CouchDB

1 2	brew install couchdb npm install -g pouchdb-server

3.启动远程服务器

1	pouchdb-server --port 5984

使用浏览器和访问" http：//本地主机：5984"
{" express-pouchdb"："欢迎使用！"，"版本"：" 0.10.0"}
显示，表明服务器已安全启动。

4.安装cors以便能够直接复制到CouchDB

1
2
3
4

npm install -g add-cors-to-couchdb
add-cors-to-couchdb
#もしlocalhostじゃないサーバーをしている場合
#add-cors-to-couchdb #{your-serevr-root-url} -u myusername -p mypassword

5.实际使用

1.下载pouchdb js
单击此处下载pouchdb

2.尝试使用indexedDB和remoteServer

复制

将此内容写入

html文件？，

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

写在

js文件？，

app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

$(function(){
var user_id = 1;
var db_name = "documents";
var remote_db_name = "http://127.0.0.1:5984/documents";
//PouchDB.debug.enable('*');
var ts = new Date().getTime().toString();
var doc = {
"_id": ts,
"user_id": user_id,
"title": "test document title" + new Date().getTime(),
"body": "test document body" + new Date().getTime()
};

PouchDB.destroy(db_name).then(function () {
return new PouchDB(db_name);
}).then(function (db) {
//
// IMPORTANT CODE STARTS HERE
//
db.put(doc).then(function () {
return db.get(ts);
}).then(function (doc) {
document.getElementById('display_stored_data').innerHTML = 'We stored a memo: ' + JSON.stringify(doc);
});
var remote_db = new PouchDB(remote_db_name);
//db.replicate.to(remote_db);
//db.replicate.from(remote_db);
});
//remoteサーバーからデータを取得する
$(document).on("click",".getRemoteData",function(){
var remote_db = new PouchDB(remote_db_name);
remote_db.get(ts,[],function(err, data){
document.getElementById('display_remotedb').innerHTML = 'We get a remote memo: ' + JSON.stringify(data);
});
});

//indexedDBからデータを取得する
$(document).on("click",".getLocalData",function(){
var local_db = new PouchDB(db_name);
local_db.get(ts,[],function(err, data){
document.getElementById('display_localdb').innerHTML = 'We get a local memo: ' + JSON.stringify(data);
});
});

//remoteサーバーからデータを全データを取得する
$(document).on("click",".showAllRemoteData",function(){
var target = document.getElementById('show_all_remote_memo');
target.innerHTML = "";
var remote_db = new PouchDB(remote_db_name);
remote_db.allDocs({include_docs: true}, function(err, doc) {
doc.rows.forEach(function(row){
var content = document.createElement("li");
content.innerHTML =("<p>user:"+row.doc.user_id+" > "+row.doc.title+"</p><span>"+row.doc.body+"</span>");
target.appendChild(content);
});
});
});

//indexedDBからデータを全データを取得する
$(document).on("click",".showAllLocalData",function(){
var target = document.getElementById('show_all_local_memo');
target.innerHTML = "";
var db = new PouchDB(db_name);
db.allDocs({include_docs: true}, function(err, doc) {
doc.rows.forEach(function(row){
var content = document.createElement("li");
content.innerHTML =("<p>user:"+row.doc.user_id+" > "+row.doc.title+"</p><span>"+row.doc.body+"</span>");
target.appendChild(content);
});
});
});

$(document).on("click",".deleteAllLocalData",function(){
var db = new PouchDB(db_name);
db.destroy();
});

$(document).on("click",".deleteAllRemoteData",function(){
var remote_db = new PouchDB(remote_db_name);
remote_db.destroy();
});

$(document).on("click",".syncDataToRemote",function(){
var local_db = new PouchDB(db_name);
var remote_db = new PouchDB(remote_db_name);
local_db.replicate.to(remote_db);
});
});

3.练习！

加载页面时，

Screen Shot 2014-12-24 at 6.41.03 PM.png