Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1217)

Side by Side Diff: src/site/docs/tutorials/indexeddb/index.markdown

Issue 26542002: edit pass on T3,4,5, updated images (Closed) Base URL: https://github.com/dart-lang/dartlang.org.git@master
Patch Set: merging with master Created 7 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 --- 1 ---
2 layout: default 2 layout: default
3 title: "Use IndexedDB" 3 title: "Use IndexedDB"
4 description: "Use IndexedDB for persistence and offline capability for your app. " 4 description: "Use IndexedDB for persistence and offline capability for your app. "
5 has-permalinks: true 5 has-permalinks: true
6 tutorial: 6 tutorial:
7 id: indexeddb 7 id: indexeddb
8 next: 8 next:
9 next-title: "A Game of Darts" 9 next-title: "A Game of Darts"
10 prev: forms/ 10 prev: forms/
11 prev-title: "Get Input from a Form" 11 prev-title: "Get Input from a Form"
12 --- 12 ---
13 13
14 {% capture whats_the_point %} 14 {% capture whats_the_point %}
15 15
16 * IndexedDB is a new standard for client-side storage in modern web browsers. 16 * IndexedDB is a new standard for client-side storage in modern web browsers.
17 * Client-side storage provides persistence, offline capability, 17 * Client-side storage provides persistence, offline capability,
18 and other advantages. 18 and other advantages.
19 * IndexedDB lets you store significant amounts of structured data. 19 * IndexedDB lets you store significant amounts of structured data.
20 * Indices allow for high performance searches. 20 * Indices allow for high performance searches.
21 * The dart:indexed_db library provides the API for IndexedDB for Dart apps. 21 * The dart:indexed_db library provides the API for IndexedDB for Dart apps.
22 * Save and retrieve data in IndexedDB using key-value pairs. 22 * Save and retrieve data in IndexedDB using key-value pairs.
23 23
24 {% endcapture %} 24 {% endcapture %}
25 25
26 {% capture sample_links %} 26 {% capture sample_links %}
27 27
28 <p> 28 <p>
29 Get the source code for the example featured in this target:</p> 29 Get the source code for the example featured in this tutorial:</p>
30 30
31 <ul> 31 <ul>
32 <li> 32 <li>
33 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web /target11/count_down" 33 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web /indexeddb/count_down"
34 target="_blank">count_down</a> (web_ui) 34 target="_blank">count_down</a>
35 </li>
36 <li>
37 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web /target11/count_down"
38 target="_blank">count_down</a> (polymer)
39 </li> 35 </li>
40 </ul> 36 </ul>
41 37
42 {% endcapture %} 38 {% endcapture %}
43 39
44 {% capture content %} 40 {% capture content %}
45 41
46 <div class="tute-target-title"> 42 <div class="tute-target-title">
47 <h1>{{page.title}}</h1> 43 <h1>{{page.title}}</h1>
48 <h3>Save data on the client.</h3> 44 <h3>Save data on the client.</h3>
(...skipping 28 matching lines...) Expand all
77 Some browsers don't yet support IndexedDB. 73 Some browsers don't yet support IndexedDB.
78 Check 74 Check
79 <a href="http://caniuse.com/#feat=indexeddb" 75 <a href="http://caniuse.com/#feat=indexeddb"
80 target="_blank">caniuse.com</a> 76 target="_blank">caniuse.com</a>
81 for up-to-date information. 77 for up-to-date information.
82 Your app can check programmatically 78 Your app can check programmatically
83 if the current platform supports IndexedDB 79 if the current platform supports IndexedDB
84 and adjust accordingly. 80 and adjust accordingly.
85 </aside> 81 </aside>
86 82
87 This target shows you how to use 83 This tutorial shows you how to use
88 <a href="https://api.dartlang.org/dart_indexed_db.html" 84 <a href="https://api.dartlang.org/dart_indexed_db.html"
89 target="_blank">dart:indexed_db</a> 85 target="_blank">dart:indexed_db</a>
90 to store data to and retrieve data from the browser's IndexedDB. 86 to store data to and retrieve data from the browser's IndexedDB.
91 87
92 * [Run the app](#run-the-app) 88 * [Run the app](#run-the-app)
93 * [About the app: The basics](#the-basics) 89 * [About the app: The basics](#the-basics)
94 * [Details about IndexedDB](#details-about-indexeddb) 90 * [Details about IndexedDB](#details-about-indexeddb)
95 * [Importing the IndexedDB library](#import-indexeddb) 91 * [Importing the IndexedDB library](#import-indexeddb)
96 * [Checking for IndexedDB support](#checking-indexeddb) 92 * [Checking for IndexedDB support](#checking-indexeddb)
97 * [Creating and opening a database](#opening-indexeddb) 93 * [Creating and opening a database](#opening-indexeddb)
(...skipping 23 matching lines...) Expand all
121 <a href="index.html#run-the-app">this page</a>. 117 <a href="index.html#run-the-app">this page</a>.
122 The milestone you created still exists 118 The milestone you created still exists
123 because the app stored it in an IndexedDB in the browser. 119 because the app stored it in an IndexedDB in the browser.
124 120
125 Use the minus (**-**) button to the right of a milestone 121 Use the minus (**-**) button to the right of a milestone
126 to delete that milestone. 122 to delete that milestone.
127 Use the **Clear** button to delete all the milestones. 123 Use the **Clear** button to delete all the milestones.
128 124
129 <iframe class="running-app-frame" 125 <iframe class="running-app-frame"
130 style="height:400px;width:600px;" 126 style="height:400px;width:600px;"
131 src="http://dart-lang.github.io/dart-tutorials-samples/web/target11/coun t_down/web/out/count_down.html"> 127 src="examples/count_down/out/web/count_down.html">
132 </iframe> 128 </iframe>
133 129
134 You can find the complete source code for this sample on github at 130 You can find the complete source code for this sample on github at
135 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/tar get11/count_down" target="_blank">count_down</a>. 131 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/ind exeddb/count_down" target="_blank">count_down</a>.
136 132
137 ###Using developer tools to look at the database 133 ###Using developer tools to look at the database
138 134
139 You can use the browser's developer tools 135 You can use the browser's developer tools
140 to explore the IndexedDB databases used by your apps. 136 to explore the IndexedDB databases used by your apps.
141 In Chrome, select **View&nbsp;>&nbsp;Developer&nbsp;>&nbsp;Developer Tools**, 137 In Chrome, select **View&nbsp;>&nbsp;Developer&nbsp;>&nbsp;Developer Tools**,
142 then choose **Resources** from the tabs along the top of the window. 138 then choose **Resources** from the tabs along the top of the window.
143 The following diagram shows the database 139 The following diagram shows the database
144 for the count_down app with two milestones. 140 for the count_down app with two milestones.
145 141
(...skipping 28 matching lines...) Expand all
174 and MilestoneComponent describes the UI for an individual milestone. 170 and MilestoneComponent describes the UI for an individual milestone.
175 These components inform the View-model of UI events. 171 These components inform the View-model of UI events.
176 172
177 * The **Model** contains and manages the data. 173 * The **Model** contains and manages the data.
178 The Model, 174 The Model,
179 implemented by the MilestoneStore class, 175 implemented by the MilestoneStore class,
180 manages a list of Milestone objects in memory 176 manages a list of Milestone objects in memory
181 and keeps an IndexedDB in sync with the list, 177 and keeps an IndexedDB in sync with the list,
182 saving the milestone data persistently. 178 saving the milestone data persistently.
183 The View-model queries the Model upon initialization 179 The View-model queries the Model upon initialization
184 and uses Web UI data-bindings to keep the View in sync. 180 and uses Polymer data-bindings to keep the View in sync.
185 Also, it uses Timer events to trigger updates in the Model. 181 Also, it uses Timer events to trigger updates in the Model.
186 182
187 ###The libraries used by the count_down app 183 ###The libraries used by the count_down app
188 184
189 The count_down app uses the following libraries: 185 The count_down app uses the following libraries:
190 186
191 | Library | Description | 187 | Library | Description |
192 |---|---| 188 |---|---|
193 | <a href="https://api.dartlang.org/dart_indexed_db.html" target="_blank">dart:i ndexed_db</a> | Save data into an indexed database for persistence and offline c apability | 189 | <a href="https://api.dartlang.org/dart_indexed_db.html" target="_blank">dart:i ndexed_db</a> | Save data into an indexed database for persistence and offline c apability |
194 | <a href="https://api.dartlang.org/dart_async.html" target="_blank">dart:async< /a> | Perform tasks asynchronously | 190 | <a href="https://api.dartlang.org/dart_async.html" target="_blank">dart:async< /a> | Perform tasks asynchronously |
195 | <a href="https://api.dartlang.org/dart_core.html" target="_blank">dart:core</a > | Use DateTime and Duration to manage time-related tasks | 191 | <a href="https://api.dartlang.org/dart_core.html" target="_blank">dart:core</a > | Use DateTime and Duration to manage time-related tasks |
196 | <a href="https://pub.dartlang.org/packages/web_ui" target="_blank">package:web _ui</a> | Create UIs with data-binding and web components. | 192 | <a href="https://api.dartlang.org/polymer.html" target="_blank">Polymer</a> | Create UIs with custom elements and data binding. |
197 {: .table } 193 {: .table }
198 194
199 This target explains the Dart API for IndexedDB used by the count_down app. 195 This tutorial explains the Dart API for IndexedDB used by the count_down app.
200 In addition, this target covers some interesting 196 In addition, this tutorial covers some interesting
201 API related to dates, times, and timers. 197 API related to dates, times, and timers.
202 198
203 <aside class="alert" markdown="1"> 199 <aside class="alert" markdown="1">
204 <strong>Note:</strong> 200 <strong>Note:</strong>
205 This target does not cover Futures or Web UI. 201 This tutorial does not cover Futures or Polymer.
206 For information about Futures, 202 For information about Futures,
207 see 203 see
208 <a href="/articles/using-future-based-apis/">Using Future Based APIs</a> 204 <a href="/articles/using-future-based-apis/">Using Future Based APIs</a>
209 and 205 and
210 <a href="/articles/futures-and-error-handling/">Futures and Error Handling</a>. 206 <a href="/articles/futures-and-error-handling/">Futures and Error Handling</a>.
211 For information about Web UI, 207 For information about Polymer,
212 check out the relevant recipes in the 208 refer to <a href="/docs/tutorials/polymer-intro/">Define a Custom Element</a>.
213 <a href="/docs/cookbook/">
214 <i class="icon-food"> </i> Dart Cookbook</a>
215 or read the Web UI tutorials in
216 Targets <a href="/docs/tutorials/web-ui/">6</a>,
217 <a href="/docs/tutorials/templates/">7</a>,
218 <a href="/docs/tutorials/custom-elements/">8</a>.
219 209
220 </aside> 210 </aside>
221 211
222 ##Details about IndexedDB 212 ##Details about IndexedDB
223 213
224 Some important facts you need to know about IndexedDB: 214 Some important facts you need to know about IndexedDB:
225 215
226 * Each origin (host, protocol, and port) has its own set of databases. 216 * Each origin (host, protocol, and port) has its own set of databases.
227 A unique name identifies each database within an origin. 217 A unique name identifies each database within an origin.
228 IndexedDB has a same-origin policy, 218 IndexedDB has a same-origin policy,
(...skipping 477 matching lines...) Expand 10 before | Expand all | Expand 10 after
706 696
707 ##Other resources 697 ##Other resources
708 698
709 <ul> 699 <ul>
710 <li> For information about Futures, see 700 <li> For information about Futures, see
711 <a href="/articles/using-future-based-apis/">Using Future Based APIs</a> 701 <a href="/articles/using-future-based-apis/">Using Future Based APIs</a>
712 and 702 and
713 <a href="/articles/futures-and-error-handling/">Futures and Error Handling</a> . 703 <a href="/articles/futures-and-error-handling/">Futures and Error Handling</a> .
714 </li> 704 </li>
715 <li> 705 <li>
716 For information about Web UI, 706 For information about Polymer,
717 check out the relevant recipes in the 707 read <a href="/docs/tutorials/polymer-intro">Define a Custom Element</a>.
718 <a href="/docs/cookbook/">
719 <i class="icon-food"> </i> Dart Cookbook</a>
720 or read Targets <a href="/docs/tutorials/web-ui">6</a>,
721 <a href="/docs/tutorials/templates">7</a>, and
722 <a href="/docs/tutorials/custom-elements">8</a>.
723 </li> 708 </li>
724 </ul> 709 </ul>
725 710
726 ###What next? 711 ###What next?
727 712
728 Check out our 713 Check out our
729 <a href="/codelabs/web-ui-writer/index.html" target="_blank"><i class="icon-beak er"> </i>Codelab</a>; 714 <a href="/codelabs/web-ui-writer/index.html" target="_blank"><i class="icon-beak er"> </i>Codelab</a>;
730 it uses LocalStorage instead of IndexedDB to store data in the client. 715 it uses LocalStorage instead of IndexedDB to store data in the client.
731 Try converting it to use IndexedDB. 716 Try converting it to use IndexedDB.
732 717
733 {% endcapture %} 718 {% endcapture %}
734 719
735 {% include tutorial.html %} 720 {% include tutorial.html %}
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698