OLD | NEW |
| (Empty) |
1 <!-- | |
2 @license | |
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | |
4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | |
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | |
7 Code distributed by Google as part of the polymer project is also | |
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | |
9 --> | |
10 | |
11 <link rel="import" href="../polymer/polymer.html"> | |
12 | |
13 <!-- | |
14 Element access to Web Storage API (window.localStorage). | |
15 | |
16 Keeps `value` in sync with a localStorage key. | |
17 | |
18 Direct assignments to `value` are automatically detected and saved. | |
19 Subproperty assignments are not (ex: `value.bar='foo'`). | |
20 Call `save()` manually to commit your changes after modifying subproperties. | |
21 | |
22 Value is saved in localStorage as JSON by default. | |
23 | |
24 If you set the value to null, storage key will be deleted. | |
25 | |
26 <iron-localstorage name="my-app-storage" value="{{value}}"> | |
27 </iron-localstorage> | |
28 | |
29 | |
30 <b>Warning</b>: do not pass subproperty bindings to iron-localstorage until Poly
mer | |
31 [bug 1550](https://github.com/Polymer/polymer/issues/1550) | |
32 is resolved. Local storage will be blown away. | |
33 No `<iron-localstorage value="{{foo.bar}}"`. | |
34 | |
35 @group Iron Elements | |
36 @demo demo/index.html | |
37 @hero hero.svg | |
38 @element iron-localstorage | |
39 --> | |
40 <dom-module id="iron-localstorage"></dom-module> | |
41 <script> | |
42 | |
43 Polymer({ | |
44 is: 'iron-localstorage', | |
45 | |
46 /** | |
47 * Fired when value loads from localStorage. | |
48 * | |
49 * @event paper-responsive-change | |
50 * @param {{externalChange: boolean}} detail - | |
51 * externalChange: True if change occured in different window. | |
52 */ | |
53 | |
54 /** | |
55 * Fired when loaded value is null. | |
56 * You can use event handler to initialize default value. | |
57 * | |
58 * @event iron-localstorage-load-empty | |
59 */ | |
60 properties: { | |
61 /** | |
62 * The key to the data stored in localStorage. | |
63 */ | |
64 name: { | |
65 type: String, | |
66 value: '' | |
67 }, | |
68 /** | |
69 * The data associated with this storage. | |
70 * If value is set to null, and storage is in useRaw mode, item will be de
leted | |
71 * @type {*} | |
72 */ | |
73 value: { | |
74 type: Object, | |
75 notify: true | |
76 }, | |
77 | |
78 /** | |
79 * Value is stored and retrieved without JSON parse if true | |
80 */ | |
81 useRaw: { | |
82 type: Boolean, | |
83 value: false | |
84 }, | |
85 | |
86 /** | |
87 * Auto save is disabled if true. Default to false. | |
88 */ | |
89 autoSaveDisabled: { | |
90 type: Boolean, | |
91 value: false | |
92 }, | |
93 /** | |
94 * Last error encountered while saving/loading items. Null otherwise | |
95 */ | |
96 errorMessage: { | |
97 type: String, | |
98 notify: true | |
99 }, | |
100 /* | |
101 * True if value was loaded | |
102 */ | |
103 _loaded: { | |
104 type: Boolean, | |
105 value: false | |
106 } | |
107 }, | |
108 | |
109 observers: [ | |
110 'reload(name,useRaw)', | |
111 '_trySaveValue(value, _loaded, autoSaveDisabled)' | |
112 ], | |
113 | |
114 ready: function() { | |
115 this._boundHandleStorage = this._handleStorage.bind(this); | |
116 }, | |
117 | |
118 attached: function() { | |
119 window.addEventListener('storage', this._boundHandleStorage); | |
120 }, | |
121 | |
122 detached: function() { | |
123 window.removeEventListener('storage', this._boundHandleStorage); | |
124 }, | |
125 | |
126 _handleStorage: function(ev) { | |
127 if (ev.key == this.name) { | |
128 this._load(true); | |
129 } | |
130 }, | |
131 | |
132 _trySaveValue: function(value, _loaded, autoSaveDisabled) { | |
133 if (this._justLoaded) { // guard against saving after _load() | |
134 this._justLoaded = false; | |
135 return; | |
136 } | |
137 if (_loaded && !autoSaveDisabled) { | |
138 this.save(); | |
139 } | |
140 }, | |
141 | |
142 /** | |
143 * Loads the value again. Use if you modify | |
144 * localStorage using DOM calls, and want to | |
145 * keep this element in sync. | |
146 */ | |
147 reload: function() { | |
148 this._load(); | |
149 }, | |
150 | |
151 /** | |
152 * loads value from local storage | |
153 * @param {boolean=} externalChange true if loading changes from a different
window | |
154 */ | |
155 _load: function(externalChange) { | |
156 var v = window.localStorage.getItem(this.name); | |
157 | |
158 if (v === null) { | |
159 this.fire('iron-localstorage-load-empty'); | |
160 } else if (!this.useRaw) { | |
161 try { | |
162 v = JSON.parse(v); | |
163 } catch(x) { | |
164 this.errorMessage = "Could not parse local storage value"; | |
165 console.error("could not parse local storage value", v); | |
166 } | |
167 } | |
168 | |
169 this._justLoaded = true; | |
170 this._loaded = true; | |
171 this.value = v; | |
172 this.fire('iron-localstorage-load', { externalChange: externalChange}); | |
173 }, | |
174 | |
175 /** | |
176 * Saves the value to localStorage. Call to save if autoSaveDisabled is set. | |
177 * If `value` is null, deletes localStorage. | |
178 */ | |
179 save: function() { | |
180 var v = this.useRaw ? this.value : JSON.stringify(this.value); | |
181 try { | |
182 if (this.value === null) { | |
183 window.localStorage.removeItem(this.name); | |
184 } else { | |
185 window.localStorage.setItem(this.name, /** @type {string} */ (v)); | |
186 } | |
187 } | |
188 catch(ex) { | |
189 // Happens in Safari incognito mode, | |
190 this.errorMessage = ex.message; | |
191 console.error("localStorage could not be saved. Safari incoginito mode?"
, ex); | |
192 } | |
193 } | |
194 | |
195 }); | |
196 | |
197 </script> | |
OLD | NEW |