OLD | NEW |
---|---|
1 <h1 id="lab_5_manage_data">Save and Fetch Data</h1> | 1 <h1 id="lab_5_manage_data">Save and Fetch Data</h1> |
2 | 2 |
3 <p>The <a href="app_codelab3_mvc.html">sample from Lab 3</a> | 3 <p>The <a href="app_codelab3_mvc">sample from Lab 3</a> |
4 uses a static array of Todos. | 4 uses a static array of Todos. |
5 Every time your app restarts, | 5 Every time your app restarts, |
6 whatever you've changed is lost. | 6 whatever you've changed is lost. |
7 In this section, we will save every change using | 7 In this section, we will save every change using |
8 <a href="storage.html">chrome.storage.sync</a>. | 8 <a href="storage">chrome.storage.sync</a>. |
9 </p> | 9 </p> |
10 | 10 |
11 <p> | 11 <p> |
12 This lets you store <em>small things</em> that automatically sync to the cloud | 12 This lets you store <em>small things</em> that automatically sync to the cloud |
13 if you are online and logged in to Chrome. | 13 if you are online and logged in to Chrome. |
14 If you are offline or unlogged, it saves locally and transparently: | 14 If you are offline or unlogged, it saves locally and transparently: |
15 you don't have to handle online check and offline fallback in your applicati on. | 15 you don't have to handle online check and offline fallback in your applicati on. |
16 </p> | 16 </p> |
17 | 17 |
18 <h2 id="save_your_todos_in_the_cloud">Save your Todos in the cloud</h2> | 18 <h2 id="save_your_todos_in_the_cloud">Save your Todos in the cloud</h2> |
(...skipping 381 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
400 <p> | 400 <p> |
401 If you get stuck and want to see the app in action, | 401 If you get stuck and want to see the app in action, |
402 go to <code>chrome://extensions</code>, load the unpacked app, | 402 go to <code>chrome://extensions</code>, load the unpacked app, |
403 and launch the app from a new tab: | 403 and launch the app from a new tab: |
404 <a href="https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab5_dat a/angularjs/2_drop_files">AngularJS 2_drop_files</a> | 404 <a href="https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab5_dat a/angularjs/2_drop_files">AngularJS 2_drop_files</a> |
405 or <a href="https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab5_ data/javascript/2_drop_files">JavaScript 2_drop_files</a>. | 405 or <a href="https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab5_ data/javascript/2_drop_files">JavaScript 2_drop_files</a>. |
406 </p> | 406 </p> |
407 | 407 |
408 <h2 id="challenge_">Challenge</h2> | 408 <h2 id="challenge_">Challenge</h2> |
409 | 409 |
410 <p>The current code only saves the file reference, but it doesn't open the f ile. Using the <a href="http://www.html5rocks.com/en/tutorials/file/filesystem/" >HTML5 Filesystem API</a>, save the file contents in a sandboxed filesystem. Whe n the Todo item is archived, remove the corresponding file from the sandboxed fi lesystem. Add an "open" link on each Todo that has an associated file. When the item is clicked and the file exists in the sandboxed filesystem, use t he Chrome App <a href="fileSystem.html">Filesystem API</a> to request a writable FileEntry from the user. Save the file data from the sandboxed filesystem into that entry.</p> | 410 <p>The current code only saves the file reference, but it doesn't open the f ile. Using the <a href="http://www.html5rocks.com/en/tutorials/file/filesystem/" >HTML5 Filesystem API</a>, save the file contents in a sandboxed filesystem. Whe n the Todo item is archived, remove the corresponding file from the sandboxed fi lesystem. Add an "open" link on each Todo that has an associated file. When the item is clicked and the file exists in the sandboxed filesystem, use t he Chrome App <a href="fileSystem.html">Filesystem API</a> to request a writable FileEntry from the user. Save the file data from the sandboxed filesystem into that entry.</p> |
mkearney1
2014/05/14 19:56:06
You don't need .html in <a href="fileSystem.html">
| |
411 | 411 |
412 <p class="note"><b>Tip:</b> managing file entries using the raw HTML5 Filesyste m API is not trivial. You might want to use a wrapper library, like Eric Bidelma n's <a href="https://github.com/ebidel/filer.js">filer.js</a>.</p> | 412 <p class="note"><b>Tip:</b> managing file entries using the raw HTML5 Filesyste m API is not trivial. You might want to use a wrapper library, like Eric Bidelma n's <a href="https://github.com/ebidel/filer.js">filer.js</a>.</p> |
413 | 413 |
414 <h2 id="takeaways_">Takeaways</h2> | 414 <h2 id="takeaways_">Takeaways</h2> |
415 | 415 |
416 <ul> | 416 <ul> |
417 <li><p>Use <a href="storage.html">chrome.storage.sync</a> to save small data tha t you need to be sync'ed among devices, like configuration options, applicat ion state, etc. The sync is automatic, as long as the same user is logged into C hrome on all devices.</p></li> | 417 <li><p>Use <a href="storage">chrome.storage.sync</a> to save small data that you need to be sync'ed among devices, like configuration options, application s tate, etc. The sync is automatic, as long as the same user is logged into Chrome on all devices.</p></li> |
418 <li><p>Chrome Apps support almost all HTML5 APIs, such as drag and drop. | 418 <li><p>Chrome Apps support almost all HTML5 APIs, such as drag and drop. |
419 HTML Filesystem API is also supported, with extra features from the Chrome App&# 39;s | 419 HTML Filesystem API is also supported, with extra features from the Chrome App&# 39;s |
420 <a href="fileSystem.html">Filesystem API</a>, | 420 <a href="fileSystem">Filesystem API</a>, |
421 like asking the user to pick files on her local disk for read and write. | 421 like asking the user to pick files on her local disk for read and write. |
422 The vanilla HTML5 Filesystem API only allows access to a sandboxed filesystem.</ p></li> | 422 The vanilla HTML5 Filesystem API only allows access to a sandboxed filesystem.</ p></li> |
423 </ul> | 423 </ul> |
424 | 424 |
425 <h2 id="you_should_also_read">You should also read</h2> | 425 <h2 id="you_should_also_read">You should also read</h2> |
426 | 426 |
427 <p><a href="app_storage.html">Manage Data</a> tutorial</p> | 427 <p><a href="app_storage">Manage Data</a> tutorial</p> |
428 | 428 |
429 <h2 id="what_39_s_next_">What's next?</h2> | 429 <h2 id="what_39_s_next_">What's next?</h2> |
430 | 430 |
431 <p>In <a href="app_codelab6_lifecycle.html">5 - Manage App Lifecycle</a>, | 431 <p>In <a href="app_codelab6_lifecycle">5 - Manage App Lifecycle</a>, |
432 you will learn the basics of the Chrome App lifecycle. </p> | 432 you will learn the basics of the Chrome App lifecycle. </p> |
OLD | NEW |