forked from SuyashMShepHertz/indexedDB_sample
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
91 lines (82 loc) · 4.01 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>IndexedDB</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
var request, db;
if(!window.indexedDB)
{
console.log("Your Browser does not support IndexedDB");
}
else
{
request = window.indexedDB.open("testDB", 2);
request.onerror = function(event){
console.log("Error opening DB", event);
}
request.onupgradeneeded = function(event){
console.log("Upgrading");
db = event.target.result;
var objectStore = db.createObjectStore("students", { keyPath : "rollNo" });
};
request.onsuccess = function(event){
console.log("Success opening DB");
db = event.target.result;
}
}
$("#addBtn").click(function(){
var name = $("#name").val();
var rollNo = $("#rollno").val();
var transaction = db.transaction(["students"],"readwrite");
transaction.oncomplete = function(event) {
console.log("Success :)");
$("#result").html("Add : Success");
};
transaction.onerror = function(event) {
console.log("Error :(");
$("#result").html("Add : Error");
};
var objectStore = transaction.objectStore("students");
objectStore.add({rollNo: rollNo, name: name});
});
$("#removeBtn").click(function(){
var rollNo = $("#rollno").val();
db.transaction(["students"],"readwrite").objectStore("students").delete(rollNo);
});
$("#getBtn").click(function(){
var rollNo = $("#rollno").val();
var request = db.transaction(["students"],"readwrite").objectStore("students").get(rollNo);
request.onsuccess = function(event){
$("#result").html("Name : "+request.result.name);
};
});
$("#updateBtn").click(function(){
var rollNo = $("#rollno").val();
var name = $("#name").val();
var transaction = db.transaction(["students"],"readwrite");
var objectStore = transaction.objectStore("students");
var request = objectStore.get(rollNo);
request.onsuccess = function(event){
$("#result").html("Updating : "+request.result.name + " to " + name);
request.result.name = name;
objectStore.put(request.result);
};
});
});
</script>
</head>
<body>
<form>
Roll No <input type="text" name="rollno" id="rollno"/><br>
Name <input type="text" name="name" id="name" /><br>
<input type="button" name="addBtn" value="Add" id="addBtn"/>
<input type="button" name="removeBtn" value="Remove" id="removeBtn"/>
<input type="button" name="getBtn" value="Get" id="getBtn"/>
<input type="button" name="updateBtn" value="Update" id="updateBtn"/>
</form>
<div id="result"></div>
</body>
</html>