| 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: "Home" | 9 next-title: "Home" |
| 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 |
| 29 <p> This tutorial features this example:</p> |
| 30 * count_down |
| 31 |
| 28 <p> | 32 <p> |
| 29 Get the source code for the example featured in this tutorial:</p> | 33 Don't have the source code? |
| 30 | 34 <a href="https://github.com/dart-lang/dart-tutorials-samples/archive/master.zip"
> |
| 31 <ul> | 35 Download it. |
| 32 <li> | 36 </a> |
| 33 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/indexeddb/count_down" | |
| 34 target="_blank">count_down</a> | |
| 35 </li> | |
| 36 </ul> | |
| 37 | 37 |
| 38 {% endcapture %} | 38 {% endcapture %} |
| 39 | 39 |
| 40 {% capture content %} | 40 {% capture content %} |
| 41 | 41 |
| 42 <div class="tute-target-title"> | 42 <div class="tute-target-title"> |
| 43 <h1>{{page.title}}</h1> | 43 <h1>{{page.title}}</h1> |
| 44 <h3>Save data on the client.</h3> | 44 <h3>Save data on the client.</h3> |
| 45 </div> | 45 </div> |
| 46 | 46 |
| (...skipping 73 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 120 | 120 |
| 121 Use the minus (**-**) button to the right of a milestone | 121 Use the minus (**-**) button to the right of a milestone |
| 122 to delete that milestone. | 122 to delete that milestone. |
| 123 Use the **Clear** button to delete all the milestones. | 123 Use the **Clear** button to delete all the milestones. |
| 124 | 124 |
| 125 <iframe class="running-app-frame" | 125 <iframe class="running-app-frame" |
| 126 style="height:400px;width:600px;" | 126 style="height:400px;width:600px;" |
| 127 src="examples/count_down/out/web/count_down.html"> | 127 src="examples/count_down/out/web/count_down.html"> |
| 128 </iframe> | 128 </iframe> |
| 129 | 129 |
| 130 You can find the complete source code for this sample on github at | |
| 131 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/ind
exeddb/count_down" target="_blank">count_down</a>. | |
| 132 | |
| 133 ###Using developer tools to look at the database | 130 ###Using developer tools to look at the database |
| 134 | 131 |
| 135 You can use the browser's developer tools | 132 You can use the browser's developer tools |
| 136 to explore the IndexedDB databases used by your apps. | 133 to explore the IndexedDB databases used by your apps. |
| 137 In Chrome, select **View > Developer > Developer Tools**, | 134 In Chrome, select **View > Developer > Developer Tools**, |
| 138 then choose **Resources** from the tabs along the top of the window. | 135 then choose **Resources** from the tabs along the top of the window. |
| 139 The following diagram shows the database | 136 The following diagram shows the database |
| 140 for the count_down app with two milestones. | 137 for the count_down app with two milestones. |
| 141 | 138 |
| 142 The count_down app has a single database named `milestoneDB`. | 139 The count_down app has a single database named `milestoneDB`. |
| (...skipping 566 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 709 | 706 |
| 710 ###What next? | 707 ###What next? |
| 711 | 708 |
| 712 You've completed the tutorials! | 709 You've completed the tutorials! |
| 713 Check out the Dart | 710 Check out the Dart |
| 714 [code samples](/samples/) and [articles](/articles/). | 711 [code samples](/samples/) and [articles](/articles/). |
| 715 | 712 |
| 716 {% endcapture %} | 713 {% endcapture %} |
| 717 | 714 |
| 718 {% include tutorial.html %} | 715 {% include tutorial.html %} |
| OLD | NEW |