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 |