-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindexedDB_demo.html
executable file
·130 lines (114 loc) · 3.76 KB
/
indexedDB_demo.html
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
<html>
<button id="openDB">Open DB</button>
<button id="addData">Add data</button>
<button id="showData">Show Data</button>
<button id="deleteData">Delete random row</button>
<div id="result">Results will show here.</div>
<script>
let db;
const STORE_NAME = "SimpleStore";
const result = document.getElementById("result");
function openDB() {
const req = indexedDB.open("SimpleDB");
req.onupgradeneeded = (event) => defineDBSchema(event);
req.onsuccess = (event) => dbOkay(event);
req.onerror = (event) => err_handler(event);
}
function dbOkay(event) {
db = event.target.result;
result.textContent = "Got the DB";
}
function err_handler(event) {
result.textContent = "The following error occured: " + event.target.errorCode;
}
function defineDBSchema(event) {
event.target.result.createObjectStore(STORE_NAME, {keyPath: "id", autoIncrement: true});
}
function getStore() {
var tx = db.transaction(STORE_NAME, "readwrite");
return tx.objectStore(STORE_NAME);
}
function addData() {
var store = getStore();
var rows = [];
rows.push({name: "Apple", weight: 102});
rows.push({name: "Banana", weight: 125});
rows.push({name: "Orange", weight: 141.7});
result.textContent = "";
rows.forEach((row) => {
req = store.add(row);
req.onsuccess = () => {
var paragraph = document.createElement("p");
paragraph.textContent = "Added " + row.name;
result.append(paragraph);
};
req.onerror = (event) => err_handler(event);
});
}
function showData() {
var store = getStore();
var data_table = document.createElement("table");
var row_element = document.createElement("tr");
var td_element = document.createElement("td");
var head_row = makeHead(row_element, td_element);
data_table.append(head_row);
var req = store.openCursor();
req.onsuccess = (event) => populateTable(event, store, data_table, row_element, td_element);
req.onerror = (event) => err_handler(event);
result.textContent = "";
result.append(data_table);
}
function populateTable(cursor, store, dt, row, cell) {
var curs = cursor.target.result;
if (curs) {
req = store.get(curs.key);
req.onsuccess = (event) => makeRow(curs.key, event, dt, row, cell);
curs.continue();
}
}
function makeHead(row, cell) {
var col_heads = ["ID", "Fruit", "Weight"];
var head_row = row.cloneNode(true);
col_heads.forEach((col) => {
column = cell.cloneNode(true);
column.textContent = col;
head_row.append(column);
});
return head_row;
}
function makeRow(key, db_values, dt, row, cell) {
dbv = db_values.target.result
data_row = row.cloneNode(true);
vals = [key, dbv.name, dbv.weight];
vals.forEach((val) => {
column = cell.cloneNode(true);
column.textContent = val;
data_row.append(column);
});
dt.append(data_row);
}
function deleteData() {
var store = getStore();
var max_records = 0;
var req = store.count();
req.onsuccess = (event) => {
max_records = event.target.result;
if (max_records > 0) {
del_record = Math.floor(Math.random()*max_records);
del_req = store.delete(del_record);
del_req.onsuccess = (event) => {
showData();
};
}
};
}
open_button = document.getElementById("openDB");
add_button = document.getElementById("addData");
show_button = document.getElementById("showData");
delete_button = document.getElementById("deleteData");
open_button.addEventListener("click", () => openDB());
add_button.addEventListener("click", () => addData());
show_button.addEventListener("click", () => showData());
delete_button.addEventListener("click", () => deleteData());
</script>
</html>