| OLD | NEW |
| 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 Loading... |
| 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 Loading... |
| 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 > Developer > Developer Tools**, | 137 In Chrome, select **View > Developer > 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 Loading... |
| 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 Loading... |
| 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 %} |
| OLD | NEW |