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
|
---
title: IDBObjectStore
slug: Web/API/IDBObjectStore
tags:
- API
translation_of: Web/API/IDBObjectStore
---
<p>{{APIRef("IndexedDB")}}</p>
<div>
<p>The <code>IDBObjectStore</code> interface of the <a href="/en/IndexedDB" title="en/IndexedDB">IndexedDB API</a> represents an <a href="/en/IndexedDB#gloss_object_store" title="en/IndexedDB#gloss object store">object store</a> in a database. Records within an object store are sorted according to their keys. This sorting enables fast insertion, look-up, and ordered retrieval.</p>
</div>
<h2 id="Methods">Methods</h2>
<dl>
<dt>{{domxref("IDBObjectStore.add")}}</dt>
<dd>Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, creates a <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone">structured clone</a> of the <code>value</code>, and stores the cloned value in the object store. This is for adding new records to an object store.</dd>
<dt>{{domxref("IDBObjectStore.clear")}}</dt>
<dd>Creates and immediately returns an {{domxref("IDBRequest")}} object, and clears this object store in a separate thread. This is for deleting all current records out of an object store.</dd>
<dt>{{domxref("IDBObjectStore.delete")}}</dt>
<dd>returns an {{domxref("IDBRequest")}} object, and, in a separate thread, deletes the current object store. This is for deleting individual records out of an object store.</dd>
<dt>{{domxref("IDBObjectStore.get")}}</dt>
<dd>returns an {{domxref("IDBRequest")}} object, and, in a separate thread, returns the object store selected by the specified key. This is for retrieving specific records from an object store.</dd>
<dt>{{domxref("IDBObjectStore.createIndex")}}</dt>
<dd>Creates a new index during a version upgrade, returning a new {{domxref("IDBIndex")}} object in the connected database.</dd>
<dt>{{domxref("IDBObjectStore.deleteIndex")}}</dt>
<dd>Destroys the specified index in the connected database, used during a version upgrade.</dd>
<dt>{{domxref("IDBObjectStore.index")}}</dt>
<dd>Opens an index from this object store after which it can, for example, be used to return a sequence of records sorted by that index using a cursor.</dd>
<dt>{{domxref("IDBObjectStore.put")}}</dt>
<dd>Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, creates a <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone">structured clone</a> of the <code>value</code>, and stores the cloned value in the object store. This is for updating existing records in an object store when the transaction's mode is <code>readwrite</code>.</dd>
<dt>{{domxref("IDBObjectStore.openCursor")}}<span style="line-height: 1.5;"> </span></dt>
<dd>Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, returns a new {{domxref("IDBCursorWithValue")}} object. Used for iterating through an object store by primary key with a cursor.</dd>
</dl>
<h2 id="Properties">Properties</h2>
<dl>
<dt>{{domxref("IDBObjectStore.indexNames")}} {{readonlyInline}}</dt>
<dd>A list of the names of <a href="/en/IndexedDB#gloss_index" title="en/IndexedDB#gloss index">indexes</a> on objects in this object store.</dd>
<dt>{{domxref("IDBObjectStore.keyPath")}} {{readonlyInline}}</dt>
<dd>The <a href="/en/IndexedDB#gloss_key_path" title="en/IndexedDB#gloss key path">key path</a> of this object store. If this attribute is null, the application must provide a key for each modification operation.</dd>
<dt>{{domxref("IDBObjectStore.name")}} {{readonlyInline}}</dt>
<dd>The name of this object store.</dd>
<dt>{{domxref("IDBObjectStore.transaction")}} {{readonlyInline}}</dt>
<dd>The name of the transaction to which this object store belongs.</dd>
<dt>{{domxref("IDBObjectStore.autoIncrement")}} {{readonlyInline}}</dt>
<dd>The value of the auto increment flag for this object store.</dd>
</dl>
<h2 id="Obsolete_methods">Obsolete methods</h2>
<dl>
<dt>{{domxref("IDBObjectStore.openKeyCursor")}}<span style="line-height: 1.5;"> </span></dt>
<dd>Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, returns a new {{domxref("IDBCursorWithValue")}}. Used for iterating through an object store with a key. However, this is now handled by {{domxref("IDBObjectStore.openCursor")}}, if a value is specified.</dd>
</dl>
<h2 id="Example">Example</h2>
<p>This example shows a variety of different uses of ObjectStores, from updating the data structure with {{domxref("IDBObjectStore.createIndex")}} inside an <code>onupgradeneeded</code> function, to adding a new item to our object store with {{domxref("IDBObjectStore.add")}}. For a full working example, see our <a href="https://github.com/mdn/to-do-notifications/" style="line-height: 1.5;">To-do Notifications</a><span style="line-height: 1.5;"> app (</span><a href="http://mdn.github.io/to-do-notifications/" style="line-height: 1.5;">view example live</a><span style="line-height: 1.5;">.)</span></p>
<pre class="brush: js">// Let us open our database
var DBOpenRequest = window.indexedDB.open("toDoList", 4);
DBOpenRequest.onsuccess = function(event) {
note.innerHTML += '<li>Database initialised.</li>';
// store the result of opening the database in the db variable.
db = DBOpenRequest.result;
};
// This event handles the event whereby a new version of the database needs to be created
// Either one has not been created before, or a new version number has been submitted via the
// window.indexedDB.open line above
DBOpenRequest.onupgradeneeded = function(event) {
var db = event.target.result;
db.onerror = function(event) {
note.innerHTML += '<li>Error loading database.</li>';
};
// Create an objectStore for this database
var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
// define what data items the objectStore will contain
objectStore.createIndex("hours", "hours", { unique: false });
objectStore.createIndex("minutes", "minutes", { unique: false });
objectStore.createIndex("day", "day", { unique: false });
objectStore.createIndex("month", "month", { unique: false });
objectStore.createIndex("year", "year", { unique: false });
objectStore.createIndex("notified", "notified", { unique: false });
note.innerHTML += '<li>Object store created.</li>';
};
// Create a new item to add in to the object store
var newItem = [
{ taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: 'December', year: 2013, notified: "no" }
];
// open a read/write db transaction, ready for adding the data
var transaction = db.transaction(["toDoList"], "readwrite");
// report on the success of opening the transaction
transaction.oncomplete = function(event) {
note.innerHTML += '<li>Transaction opened for task addition.</li>';
};
transaction.onerror = function(event) {
note.innerHTML += '<li>Transaction not opened due to error. Duplicate items not allowed.</li>';
};
// create an object store on the transaction
var objectStore = transaction.objectStore("toDoList");
// add our newItem object to the object store
var objectStoreRequest = objectStore.add(newItem[0]);
objectStoreRequest.onsuccess = function(event) {
note.innerHTML += '<li>New item added to database.</li>';
}</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('IndexedDB', '#idl-def-IDBObjectStore', 'IDBObjectStore')}}</td>
<td>{{Spec2('IndexedDB')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>23{{property_prefix("webkit")}}<br>
24</td>
<td>10 {{property_prefix("moz")}}<br>
{{CompatGeckoDesktop("16.0")}}</td>
<td>10, partial</td>
<td>15</td>
<td>7.1</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>4.4</td>
<td>{{CompatGeckoMobile("22.0")}}</td>
<td>1.0.1</td>
<td>10</td>
<td>22</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
<li>Starting transactions: {{domxref("IDBDatabase")}}</li>
<li>Using transactions: {{domxref("IDBTransaction")}}</li>
<li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
<li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
<li>Using cursors: {{domxref("IDBCursor")}}</li>
<li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
</ul>
|
