-
Notifications
You must be signed in to change notification settings - Fork 17
/
mdn-fixit-12-12-2011.html
126 lines (101 loc) · 3.94 KB
/
mdn-fixit-12-12-2011.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
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<title>MDN FixitDAY 12-12-2011 - IndexedDB</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<script>
// This is what our customer data looks like.
const customerData = [
{ ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
{ ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
];
const dbName = "customers";
// This will improve our code to be more readable and shorter
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.indexedDB;
// and if you are in Chrome/Safari - align the names
if ('webkitIndexedDB' in window) {
window.IDBTransaction = window.webkitIDBTransaction;
window.IDBKeyRange = window.webkitIDBKeyRange;
}
var db = indexedDB.open(dbName, 4);
db.onerror = function(event) {
// Handle errors.
console.error("Err: in the database level! event: "+event);
};
db.onsuccess = function(event) {
console.log ("open the db:"+dbName);
//db = db.result;
};
function showAll() {
var transaction = db.transaction(["customers"]);
var objectStore = transaction.objectStore("customers");
var request = objectStore.get("444-44-4444");
request.onerror = function(event) {
// Handle errors!
console.error("Err: could not showAll");
};
request.onsuccess = function(event) {
// Do something with the request.result!
alert("Name for SSN 444-44-4444 is " + request.result.name);
};
}
db.onupgradeneeded = function(event) {
console.log ("open db. event: "+event);
// Create an objectStore to hold information about our customers. We're
// going to use "ssn" as our key path because it's guaranteed to be
// unique.
var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
// Create an index to search customers by name. We may have duplicates
// so we can't use a unique index.
objectStore.createIndex("name", "name", { unique: false });
// Create an index to search customers by email. We want to ensure that
// no two customers have the same email, so use a unique index.
objectStore.createIndex("email", "email", { unique: true });
// Store values in the newly created objectStore.
for (i in customerData) {
objectStore.add(customerData[i]);
}
};
function addCustomers(){
var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);
// Do something when all the data is added to the database.
transaction.oncomplete = function(event) {
alert("All done!");
};
transaction.onerror = function(event) {
// Don't forget to handle errors!
console.error("Err: while trying to add customers. Event:"+event);
};
var objectStore = transaction.objectStore("customers");
for (var i in customerData) {
var request = objectStore.add(customerData[i]);
request.onsuccess = function(event) {
console.log ("Got SSN: " + customerData[i].ssn);
// event.target.result == customerData[i].ssn
};
}
}
//showAll();
// Now lets remove one
var request = db.transaction(["customers"], IDBTransaction.READ_WRITE)
.objectStore("customers")
.delete("444-44-4444");
request.onsuccess = function(event) {
// It's gone!
console.log ("We just removed 444-44-4444 dude");
};
showAll();
</script>
<body>
<h1>MDN FixitDAY 12-12-2011 - IndexedDB</h1>
<div>
For more check the source and be strong
<a href="https://developer.mozilla.org/en/IndexedDB/Using_IndexedDB">https://developer.mozilla.org/en/IndexedDB/Using_IndexedDB</a>
</div>
</body>
</html>