-
Notifications
You must be signed in to change notification settings - Fork 0
/
indexdb.php
156 lines (137 loc) · 4.41 KB
/
indexdb.php
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="todoItems"></div>
<span id='addData'>点击添加数据</span>
</body>
</html>
<script>
var dbName = "H5AppDB"; //数据库名称
var dbVersion = 2.0; //数据库版本
var tablename = "todo"; //表名
//定义一个IndexDB方法集合对象
var H5AppDB = {};
//实例化IndexDB数据上下文，这边根据浏览器类型来做选择
var indexedDB = window.indexedDB || window.webkitIndexedDB ||window.mozIndexedDB || window.msIndexedDB;
if ('webkitIndexedDB' in window) {
window.indexedDB = window.webkitIndexedDB;
window.IDBTransaction = window.webkitIDBTransaction;
} else if ('mozIndexedDB' in window) {
window.indexedDB = window.mozIndexedDB;
}
H5AppDB.indexedDB = {};
// H5AppDB.indexedDB.db = null;
//错误信息，打印日志
H5AppDB.indexedDB.onerror = function (e) {
log.debug(e);
};
H5AppDB.indexedDB.open = function () {
//初始IndexDB
var request = indexedDB.open(dbName, dbVersion);
//如果版本不一致，执行版本升级的操作
request.onupgradeneeded = function (e) {
H5AppDB.indexedDB.db = e.target.result;
var db = H5AppDB.indexedDB.db;
console.log(2)
if (!db.objectStoreNames.contains(tablename)) {
var store = db.createObjectStore(tablename, { keyPath: "id" , autoIncrement: true});//NoSQL类型数据库中必须的主键，唯一性
}
}
request.onsuccess = function (e) {
// Old api: var v = "2-beta";
console.log("success to open DB: " + dbName);
H5AppDB.indexedDB.db = e.target.result;
var db = H5AppDB.indexedDB.db;
if (db.objectStoreNames.contains(tablename)) {
H5AppDB.indexedDB.getAllTodoItems();
// db.deleteObjectStore(tablename);
}
}
request.onfailure = H5AppDB.indexedDB.onerror;
};
//、获取对象信息
H5AppDB.indexedDB.getAllTodoItems = function () {
var todos = document.getElementById("todoItems");
todos.innerHTML = "";
var db = H5AppDB.indexedDB.db;
var trans = db.transaction([tablename], "readwrite");//通过事物开启对象
var store = trans.objectStore(tablename);//获取到对象的值
// Get everything in the store;
var keyRange = IDBKeyRange.lowerBound(0);
var cursorRequest = store.openCursor(keyRange);//开启索引为0的表
cursorRequest.onsuccess = function (e) {
var result = e.target.result;
if (!!result == false)
return;
console.log(result.value);
renderTodo(result.value);
result.continue();//这边执行轮询读取
};
cursorRequest.onerror = H5AppDB.indexedDB.onerror;
};
//绑定数据
function renderTodo(row) {
var todos = document.getElementById("todoItems");
var li = document.createElement("li");
var a = document.createElement("a");
var t = document.createTextNode(row.text);
a.addEventListener("click", function() {
H5AppDB.indexedDB.deleteTodo(row.timeStamp);
}, false);
a.textContent = " [Delete]";
li.appendChild(t);
li.appendChild(a);
todos.appendChild(li);
};
//4、添加数据对象
H5AppDB.indexedDB.addTodo = function (data) {
var db = H5AppDB.indexedDB.db;
var trans = db.transaction([tablename], "readwrite");//通过事物开启对象
var store = trans.objectStore(tablename);
//数据以对象形式保存，体现NoSQL类型数据库的灵活性
// var data = {
// "mestype": 'mesage',
// "session_no" : '4-6',
// "group-name": 'zdl',
// "mes_id": 1,
// "groupid": 2,
// "text": todoText,
// "timeStamp": new Date().getTime(),
// };
var request = store.put(data);//保存数据
request.onsuccess = function (e) {
H5AppDB.indexedDB.getAllTodoItems();
};
request.onerror = function (e) {
log.debug("Error Adding: ", e);
};
};
function addTodo() {
var todo = document.getElementById("todo");
H5AppDB.indexedDB.addTodo(todo.value);
todo.value = "";
}
// 删除数据对象
H5AppDB.indexedDB.deleteTodo = function(id) {
var db = H5AppDB.indexedDB.db;
var trans = db.transaction([tablename], "readwrite");
var store = trans.objectStore(tablename);
var request = store.delete(id);//根据主键来删除
request.onsuccess = function(e) {
H5AppDB.indexedDB.getAllTodoItems();
alert("删除成功");
};
request.onerror = function(e) {
log.debug("Error Adding: ", e);
};
};
H5AppDB.indexedDB.open();
var addData = document.getElementById('addData');
addData.onclick = function () {
H5AppDB.indexedDB.addTodo('kk');
}
</script>