forked from axemclion/jquery-indexeddb
-
Notifications
You must be signed in to change notification settings - Fork 0
/
trialtool.html
328 lines (328 loc) · 19.5 KB
/
trialtool.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
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
<html>
<head>
<title>Jquery IndexedDB Plugin</title>
<script>
function data(){
return {
"bookName": "bookName-" + parseInt(Math.random() * 100),
"price": parseInt(Math.random() * 1000),
"checkedOut": new Date()
}
};
</script>
<script src = "/IndexedDB/jquery/jquery.indexeddb.js" type="text/javascript">
</script>
</head>
<body>
<div class = "splash">
<h2>Jquery IndexedDB Plugin</h2>
<p>
The examples listed here illustrate the use of IndexedDB Jquery plugin.
</p>
</div>
<ul>
<li class="example-set">
<a class="example-set-name" href="#">Database</a>
<ul>
<li class="example">
<a class="example-name">Open Database</a>
<script type = "text/javascript">
$.indexeddb("BookShop-1").then(write, writeError);
</script>
<div class = "example-docs">
<h3>Open Database</h3>
The Jquery IndexedDB Plugin is available off the global Jquery object under the property 'indexeddb'. The first argument passed to this is the name of the database that should be opened. Among other things, this object also returns a $.Deferred().promise() object that can be used to monitor the status of the opereation.
</div>
</li>
<li class="example">
<a class="example-name" href="#">Database properties</a>
<script type = "text/javascript">
$.indexeddb("BookShop-1").then(function(db){
write("Current Database", db);
write("Database version", db.version);
}, writeError);
</script>
<div class = "example-docs">
<h3>Database Properties</h3>
<p>
The indexeddb() method returns a promise among other things. The "resolve-callback" of the promise has the database object that can be used to query the various properties of the database.
</p>
</div>
</li>
<li class="example">
<a class="example-name">Set Version</a>
<div class="example-docs">
<h3>Set Version</h3>The setVersion method changes the version of the database. It returns a promise object.
<br>
Note that the version number is optional; if not specified, the version of the database is incremented by 1.
<br>
<br>
</div>
<script type = "text/javascript">
$.indexeddb("BookShop-1").setVersion(10).then(write, writeError);
</script>
</li>
</ul>
</li>
<li class="example-set">
<a style="display: inline; background-image: url("images/opened.png");" class="example-set-name">Object Store</a>
<ul>
<li class="example">
<a class="example-name">Transaction</a>
<div class="example-docs">
<h3>Transaction</h3>The transaction object allows operations to be performed inside a transaction scope. The arguments that the transaction method takes are
<br>
<ol>
<li>
Array of object stores on which the transaction should exist. If a null array is specified, the transaction is on all object stores on the database.
<br>
</li>
<li>
The type of transaction; one of READ and READ_WRITE on the IDBTransaction Object.
<br>
</li>
</ol>
After all operations on the transaction are complete, the transaction is closed automatically.
<br>
</div>
<script type = "text/javascript">
var transaction = $.indexeddb("BookShop-1").transaction([], IDBTransaction.READ_WRITE);
transaction.then(write, writeError);
transaction.objectStore("BookList").add(data()).then(write, writeError);
transaction.objectStore("OldBookList").add(data()).then(write, writeError);
</script>
</li>
<li class="example">
<a class="example-name">Open Object Store, but don't create</a>
<div class="example-docs">
<h3>Open Object Store (Don't Create)</h3>The objectStore() method opens an object store for saving or fetching objects. It takes the following arguments.
<br>
<ol>
<li>
Name of the ObjectStore
</li>
<li>
Optional Second Argument
</li>
<ol>
<li>
true, undefined or not specified: Create an object store with keyPath=id and autoIncrement the keyPath.
<br>
</li>
<li>
false: If the object store does not exist, don't create it. Throw an error instead.
</li>
<li>
Any other object: Use the keyPath and autoIncrement properties of the object to create the object.
</li>
</ol>
</ol>Among other things, it returns a promise that can use used to get a handle to the objectStore
<br>
<br>
</div>
<script type = "text/javascript">
// A false as the second argument store indicates that the object store should not be created if it does not exist.
$.indexeddb("BookShop-1").objectStore("BookList", false).then(write, writeError);
</script>
</li>
<li class="example" id="objectStore">
<a class="example-name">Create or Open Object Store</a>
<div class="example-docs">
<h3>Create Object Store</h3>Create an object store. It takes 2 arguments
<br>
<ol>
<li>
Name of the object store
</li>
<li>
Object with a keyPath and if the keyPath should be autoIncremented or not
</li>
</ol>If the object store already exists, this fails. If returns a promise to track the status of the operation.
<br>
The version of the database in incremented by 1 automatically since IndexedDB requires the version of the database to change when this operation occurs.
<br>
<br>
</div>
<script type = "text/javascript">
// A false in the Object store indicates that the object store should not be created if it does not exist.
$.indexeddb("BookShop-1").objectStore("BookList", {
"keyPath": "id",
"autoIncrement": true
}).then(write, writeError);
</script>
</li>
<li class="example">
<a class="example-name">Delete object Store</a>
<div class="example-docs">
<h3>Delete Object Store</h3>Deletes the object store specified.
<br>
The version of the database in incremented by 1 automatically since
IndexedDB requires the version of the database to change when this
operation occurs.
<br>
Hence, this may be blocked if other transactions are in progress.
<br>
<br>
</div>
<script type = "text/javascript">
// A false in the Object store indicates that the object store should not be created if it does not exist.
$.indexeddb("BookShop-1").deleteObjectStore("BookList", false).then(write, writeError);
</script>
</li>
<li class="example-set">
<a class="example-set-name">CRUD on Object Store</a>
<ul>
<li class="example" depends="objectStore" id="add">
<a class="example-name">Add data to object store</a>
<div class="example-docs">
<h3>Add Data</h3>Adds a data to the object store specified. The data must follow the rules defined in the keyPath and autoIncrement properties when the object store was created.
<br>
It returns a promise.
<br>
<br>
</div>
<script type = "text/javascript">
var book = data();
$.indexeddb("BookShop-1").objectStore("BookList").add(book).then(function(e){
book.id = e;
write(e);
}, writeError);
</script>
</li>
<li class="example" depends="add">
<a class="example-name">Get data from object store</a>
<div class="example-docs">
<h3>Get Object</h3>Fetches the object given its keyPath value.
<br>
It returns a promise.
<br>
</div>
<script type = "text/javascript">
$.indexeddb("BookShop-1").objectStore("BookList").get(book.id).then(write, writeError);
</script>
</li>
<li class="example" depends="add">
<a class="example-name">Modify data in object store</a>
<div class="example-docs">
<h3>Modify data</h3>Modifies the data in the object store. If the object with the keyPath value does not exist, it fails.
<br>
put() and update() methods are used for modifying the data.
<br>
It returns a promise.
<br>
<br>
</div>
<script type = "text/javascript">
book["modified" + Math.random()] = true;
$.indexeddb("BookShop-1").objectStore("BookList").update(book).then(write, writeError);
</script>
</li>
<li class="example" depends="add">
<a class="example-name">Removes object from object store</a>
<div class="example-docs">
<h3>Delete Data</h3>Deletes data from the object store based on the keyPath value specified.
<br>
delete() or remove() can be used to perform this operation.
<br>
It returns a promise.
<br>
<br>
</div>
<script type = "text/javascript">
$.indexeddb("BookShop-1").objectStore("BookList").remove(book.id).then(write, writeError);
</script>
</li>
</ul>
</li>
</ul>
</li>
<li class="example-set">
<a class="example-set-name">Cursors</a>
<ul>
<li class="example">
<a class="example-name">Iterate over all objects using cursors</a>
<div class="example-docs">
<h3>Iterate using Cursors</h3>Opens a cursor on the object store. The each() method is like the JQuery each method, allowing iteration over the various objects opened as a part of the cursor.
<br/>
The cursor can take IDBKeyRange, or an array for defining cursors. The array should be of the format
<br/>
[lowerBound, upperBound, includeLowerValue, includeUpperValue].
<br/>
If value for lowerBound is not defined, the ranged cursor defined only has an upper bound.
<br/>
If value for upperBound is not defined, the ranged cursor defined only has an lower bound.
</div>
<script type = "text/javascript">
$.indexeddb("BookShop-1").objectStore("BookList").openCursor().each(write);
</script>
</li>
<li class="example">
<a class="example-name">Update some objects</a>
<div class="example-docs">
<h3>Updating objects in a cursor</h3>The updateEach() method is like the each() method on the cursor with one variation. The current object is modified with the value that is returned by the callback function.
<br>
<br>
</div>
<script type = "text/javascript">
$.indexeddb("BookShop-1").objectStore("BookList").openCursor().updateEach(function(value){
if (parseInt(Math.random() * 10 % 2)) {
value["modified-" + Math.random()] = true;
write("Updating", value);
return value;
}
});
</script>
</li>
<li class="example">
<a class="example-name">Delete some objects</a>
<div class="example-docs">
<h3>Deleting in Cursor</h3>The deleteEach() method is like the each() method on the cursor with one
variation. The current object is deleted if the return value of the callback is true.
<br>
<br>
</div>
<script type = "text/javascript">
$.indexeddb("BookShop-1").objectStore("BookList").openCursor().deleteEach(function(value, key){
if (parseInt(Math.random() * 10 % 2)) {
write("Deleting", value);
return true;
}
});
</script>
</li>
</ul>
</li>
<li class="example-set">
<a class="example-set-name">Indexes</a>
<ul>
<li class="example">
<a class="example-name">Open Index and iterate</a>
<div class="example-docs">
<h3>Iterate on Index</h3>This method opens an index (or creates if it does not already exist)
<br>
The argument is the property on which the index is to be created. The index thus created is propertyname + "-index".
<br>
Once an index is opened, cursors can be used to iterate over it. Note that in case of such a cursor, the elements returned are sorted by the value in the indexed property.
<br>
<br>
</div>
<script type = "text/javascript">
$.indexeddb("BookShop-1").objectStore("BookList").index("price").openCursor().each(write);
</script>
</li>
<li class="example">
<a class="example-name example-name-selected">Key cursor on index</a>
<div class="example-docs">
<h3>Key Cursor on Index</h3>The key cursor on an index return the value of the keyPath instead of the object like in the case of the openCursor() method.
<br>
<br>
</div>
<script type = "text/javascript">
$.indexeddb("BookShop-1").objectStore("BookList").index("price").openKeyCursor([200, 500]).each(write);
</script>
</li>
</ul>
</li>
</ul>
</body>
</html>