| OLD | NEW |
| 1 <h1>Storage APIs</h1> | 1 <h1>Storage APIs</h1> |
| 2 | 2 |
| 3 <p> | 3 <p> |
| 4 Almost every aspect of app development involves some element | 4 Almost every aspect of app development involves some element |
| 5 of sending or receiving data. | 5 of sending or receiving data. |
| 6 Starting with the basics, | 6 Starting with the basics, |
| 7 you should use an MVC framework to help you design and implement your app | 7 you should use an MVC framework to help you design and implement your app |
| 8 so that data is completely separate from the app's view on that data | 8 so that data is completely separate from the app's view on that data |
| 9 (see <a href="app_frameworks.html">MVC Architecture</a>). | 9 (see <a href="app_frameworks">MVC Architecture</a>). |
| 10 </p> | 10 </p> |
| 11 | 11 |
| 12 <p> | 12 <p> |
| 13 You also need to think about how data is handled when your app is offline | 13 You also need to think about how data is handled when your app is offline |
| 14 (see <a href="offline_apps.html">Offline First</a>). | 14 (see <a href="offline_apps">Offline First</a>). |
| 15 This doc briefly introduces the storage options | 15 This doc briefly introduces the storage options |
| 16 for sending, receiving, and saving data locally; | 16 for sending, receiving, and saving data locally; |
| 17 the remainder of the doc shows you how | 17 the remainder of the doc shows you how |
| 18 to use Chrome's File System and Sync File System APIs | 18 to use Chrome's File System and Sync File System APIs |
| 19 (see also <a href="fileSystem.html">fileSystem API</a> and | 19 (see also <a href="fileSystem">fileSystem API</a> and |
| 20 <a href="syncFileSystem.html">syncFileSystem API</a>). | 20 <a href="syncFileSystem">syncFileSystem API</a>). |
| 21 </p> | 21 </p> |
| 22 | 22 |
| 23 <p class="note"> | 23 <p class="note"> |
| 24 <b>API Samples: </b> | 24 <b>API Samples: </b> |
| 25 Want to play with the code? | 25 Want to play with the code? |
| 26 Check out the | 26 Check out the |
| 27 <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/filesyst
em-access">filesystem-access</a>, | 27 <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/filesyst
em-access">filesystem-access</a>, |
| 28 <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/syncfs-e
ditor">syncfs-editor</a> | 28 <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/syncfs-e
ditor">syncfs-editor</a> |
| 29 and <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/stor
age">storage</a> samples. | 29 and <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/stor
age">storage</a> samples. |
| 30 </p> | 30 </p> |
| 31 | 31 |
| 32 <h2 id="options">Storage options</h2> | 32 <h2 id="options">Storage options</h2> |
| 33 | 33 |
| 34 <p> | 34 <p> |
| 35 Packaged apps use many different mechanisms | 35 Packaged apps use many different mechanisms |
| 36 to send and receive data. | 36 to send and receive data. |
| 37 For external data (resources, web pages), | 37 For external data (resources, web pages), |
| 38 you need to be aware of the | 38 you need to be aware of the |
| 39 <a href="contentSecurityPolicy.html">Content Security Policy (CSP)</a>. | 39 <a href="contentSecurityPolicy">Content Security Policy (CSP)</a>. |
| 40 Similar to Chrome Extensions, | 40 Similar to Chrome Extensions, |
| 41 you can use | 41 you can use |
| 42 <a href="app_external.html#external">cross-origin XMLHttpRequests</a> | 42 <a href="app_external#external">cross-origin XMLHttpRequests</a> |
| 43 to communicate with remote servers. | 43 to communicate with remote servers. |
| 44 You can also isolate external pages, | 44 You can also isolate external pages, |
| 45 so that the rest of your app is secure | 45 so that the rest of your app is secure |
| 46 (see <a href="app_external.html#webview">Embed external web pages</a>). | 46 (see <a href="app_external#webview">Embed external web pages</a>). |
| 47 </p> | 47 </p> |
| 48 | 48 |
| 49 <p> | 49 <p> |
| 50 When saving data locally, | 50 When saving data locally, |
| 51 you can use the <a href="storage.html">Chrome Storage API</a> | 51 you can use the <a href="storage">Chrome Storage API</a> |
| 52 to save small amounts of string data and | 52 to save small amounts of string data and |
| 53 IndexedDB to save structured data. | 53 IndexedDB to save structured data. |
| 54 With IndexedDB, you can persist JavaScript objects | 54 With IndexedDB, you can persist JavaScript objects |
| 55 to an object store and use the store's indexes to query data | 55 to an object store and use the store's indexes to query data |
| 56 (to learn more, see HTML5 Rock's | 56 (to learn more, see HTML5 Rock's |
| 57 <a href="http://www.html5rocks.com/tutorials/indexeddb/todo/">Simple Todo List T
utorial</a>). | 57 <a href="http://www.html5rocks.com/tutorials/indexeddb/todo/">Simple Todo List T
utorial</a>). |
| 58 For all other types of data, | 58 For all other types of data, |
| 59 like binary data, | 59 like binary data, |
| 60 use the Filesystem and Sync Filesystem APIs. | 60 use the Filesystem and Sync Filesystem APIs. |
| 61 </p> | 61 </p> |
| (...skipping 353 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 415 You can also look at the user's sync backend service storage (in Google Drive). | 415 You can also look at the user's sync backend service storage (in Google Drive). |
| 416 Synced files are saved in a hidden Google Drive folder, | 416 Synced files are saved in a hidden Google Drive folder, |
| 417 <strong>Chrome Syncable FileSystem</strong>. The folder won't be shown in | 417 <strong>Chrome Syncable FileSystem</strong>. The folder won't be shown in |
| 418 your 'My Drive' list but can be accessed by searching the folder name | 418 your 'My Drive' list but can be accessed by searching the folder name |
| 419 in the search box. (Note that the remote folder layout is | 419 in the search box. (Note that the remote folder layout is |
| 420 <strong>not</strong> guaranteed to remain backwards compatible between | 420 <strong>not</strong> guaranteed to remain backwards compatible between |
| 421 releases.) | 421 releases.) |
| 422 </p> | 422 </p> |
| 423 | 423 |
| 424 <p class="backtotop"><a href="#top">Back to top</a></p> | 424 <p class="backtotop"><a href="#top">Back to top</a></p> |
| OLD | NEW |