LocalStorage.html 3.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-data-proxy-LocalStorage'>/**
  19. </span> * @author Ed Spencer
  20. *
  21. * The LocalStorageProxy uses the new HTML5 localStorage API to save {@link Ext.data.Model Model} data locally on the
  22. * client browser. HTML5 localStorage is a key-value store (e.g. cannot save complex objects like JSON), so
  23. * LocalStorageProxy automatically serializes and deserializes data when saving and retrieving it.
  24. *
  25. * localStorage is extremely useful for saving user-specific information without needing to build server-side
  26. * infrastructure to support it. Let's imagine we're writing a Twitter search application and want to save the user's
  27. * searches locally so they can easily perform a saved search again later. We'd start by creating a Search model:
  28. *
  29. * Ext.define('Search', {
  30. * fields: ['id', 'query'],
  31. * extend: 'Ext.data.Model',
  32. * proxy: {
  33. * type: 'localstorage',
  34. * id : 'twitter-Searches'
  35. * }
  36. * });
  37. *
  38. * Our Search model contains just two fields - id and query - plus a Proxy definition. The only configuration we need to
  39. * pass to the LocalStorage proxy is an {@link #id}. This is important as it separates the Model data in this Proxy from
  40. * all others. The localStorage API puts all data into a single shared namespace, so by setting an id we enable
  41. * LocalStorageProxy to manage the saved Search data.
  42. *
  43. * Saving our data into localStorage is easy and would usually be done with a {@link Ext.data.Store Store}:
  44. *
  45. * //our Store automatically picks up the LocalStorageProxy defined on the Search model
  46. * var store = Ext.create('Ext.data.Store', {
  47. * model: &quot;Search&quot;
  48. * });
  49. *
  50. * //loads any existing Search data from localStorage
  51. * store.load();
  52. *
  53. * //now add some Searches
  54. * store.add({query: 'Sencha Touch'});
  55. * store.add({query: 'Ext JS'});
  56. *
  57. * //finally, save our Search data to localStorage
  58. * store.sync();
  59. *
  60. * The LocalStorageProxy automatically gives our new Searches an id when we call store.sync(). It encodes the Model data
  61. * and places it into localStorage. We can also save directly to localStorage, bypassing the Store altogether:
  62. *
  63. * var search = Ext.create('Search', {query: 'Sencha Animator'});
  64. *
  65. * //uses the configured LocalStorageProxy to save the new Search to localStorage
  66. * search.save();
  67. *
  68. * # Limitations
  69. *
  70. * If this proxy is used in a browser where local storage is not supported, the constructor will throw an error. A local
  71. * storage proxy requires a unique ID which is used as a key in which all record data are stored in the local storage
  72. * object.
  73. *
  74. * It's important to supply this unique ID as it cannot be reliably determined otherwise. If no id is provided but the
  75. * attached store has a storeId, the storeId will be used. If neither option is presented the proxy will throw an error.
  76. */
  77. Ext.define('Ext.data.proxy.LocalStorage', {
  78. extend: 'Ext.data.proxy.WebStorage',
  79. alias: 'proxy.localstorage',
  80. alternateClassName: 'Ext.data.LocalStorageProxy',
  81. //inherit docs
  82. getStorageObject: function() {
  83. return window.localStorage;
  84. }
  85. });</pre>
  86. </body>
  87. </html>