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
|
---
title: IDBCursor.direction
slug: Web/API/IDBCursor/direction
translation_of: Web/API/IDBCursor/direction
---
<p>{{ APIRef("IDBCursor") }}</p>
<div>
<p> {{domxref("IDBCursor")}} 的方向属性是一个 {{domxref("DOMString")}} ，表示游标遍历的方向， (比如可以通过 {{domxref("IDBObjectStore.openCursor")}} 设置). 查看下文中 {{anch("Values")}} 章节获取可取值.</p>
</div>
<h2 id="语法">语法</h2>
<pre class="brush: js" style="font-size: 14px;">cursor.direction;</pre>
<h3 id="取值">取值</h3>
<p>用一个字符串(defined by the <a href="https://dvcs.w3.org/hg/IndexedDB/raw-file/default/Overview.html#idl-def-IDBCursorDirection"><code>IDBCursorDirection</code> enum</a>) 表示游标的遍历方向。相关取值如下表所示:</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Value</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>next</code></td>
<td>从数据源开始位置遍历</td>
</tr>
<tr>
<td><code>nextunique</code></td>
<td>
<p> </p>
<p>从数据源开始遍历；当取值有重复时，只获取一次。</p>
</td>
</tr>
<tr>
<td><code>prev</code></td>
<td>
<p><span style="line-height: 1.5;">从数据源的最后位置位置开取值</span></p>
</td>
</tr>
<tr>
<td><code>prevunique</code></td>
<td>从数据源的最后位置开始取值，只获取一次。<br>
</td>
</tr>
</tbody>
</table>
<h2 id="例子">例子</h2>
<p><span style="line-height: 1.5;">在这个简单的例子中，我们首先创建一个事物对象，返回一个对象仓库(store), 然后使用邮编遍历整个数据仓库。在每次迭代中我们记录了游标的方向，例如prev（倒序遍历）</span></p>
<pre class="language-html" style="padding: 1em 0px 1em 30px; font-size: 14px; color: rgb(77, 78, 83);"><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr;">prev</code></pre>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;">
</div>
<div class="note">
<p><span style="line-height: 1.5;"><strong>注意</strong>：我们不能改变游标的取值，因为这是个只读属性；应该在</span><span style="line-height: 1.5;">{{domxref("IDBObjectStore.openCursor")}}方法调用的第二个参数指定游标遍历的方向；</span></p>
</div>
<p><span style="line-height: 1.5;">使用游标遍历数据时，可以不需要我们指定在特定字段选择数据；我们可以直接获取所有数据，同时在每次循环迭代过程当中，我们可以通过cursor.value.foo获取数据，如下是一个完整的游标遍历数据的例子；</span><span style="line-height: 1.5;"> <a class="external external-icon" href="https://github.com/mdn/IDBcursor-example/" style="white-space: pre-line;">IDBCursor example</a></span><span style="line-height: 1.5;"> (</span><a class="external external-icon" href="http://mdn.github.io/IDBcursor-example/" style="line-height: 1.5; white-space: pre-line;">view example live</a><span style="line-height: 1.5;">.)</span></p>
<pre class="brush: js">function backwards() {
list.innerHTML = '';
var transaction = db.transaction(['rushAlbumList'], 'readonly');
var objectStore = transaction.objectStore('rushAlbumList');
objectStore.openCursor(null,'prev').onsuccess = function(event) {
var cursor = event.target.result;
if(cursor) {
var listItem = document.createElement('li');
listItem.innerHTML = '<strong>' + cursor.value.albumTitle + '</strong>, ' + cursor.value.year;
list.appendChild(listItem);
console.log(cursor.direction);
cursor.continue();
} else {
console.log('Entries displayed backwards.');
}
};
};</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', '#widl-IDBCursor-direction', 'direction')}}</td>
<td>{{Spec2('IndexedDB')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="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="sect1"> </h2>
<h2 id="参考资料">参考资料</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>
|
