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` is 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 * @param {Object} detail | |
50 * @param {Boolean} detail.externalChange true if change occured in differen
t window | |
51 * @event iron-localstorage-load | |
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 */ | |
72 value: { | |
73 type: Object, | |
74 notify: true | |
75 }, | |
76 | |
77 /** | |
78 * Value is stored and retrieved without JSON parse if true | |
79 */ | |
80 useRaw: { | |
81 type: Boolean, | |
82 value: false | |
83 }, | |
84 | |
85 /** | |
86 * Auto save is disabled if true. Default to false. | |
87 */ | |
88 autoSaveDisabled: { | |
89 type: Boolean, | |
90 value: false | |
91 }, | |
92 /** | |
93 * Last error encountered while saving/loading items. Null otherwise | |
94 */ | |
95 errorMessage: { | |
96 type: String, | |
97 notify: true | |
98 }, | |
99 /* | |
100 * True if value was loaded | |
101 */ | |
102 _loaded: { | |
103 type: Boolean, | |
104 value: false | |
105 } | |
106 }, | |
107 | |
108 observers: [ | |
109 'reload(name,useRaw)', | |
110 '_trySaveValue(value, _loaded, autoSaveDisabled)' | |
111 ], | |
112 | |
113 ready: function() { | |
114 this._boundHandleStorage = this._handleStorage.bind(this); | |
115 }, | |
116 | |
117 attached: function() { | |
118 window.addEventListener('storage', this._boundHandleStorage); | |
119 }, | |
120 | |
121 detached: function() { | |
122 window.removeEventListener('storage', this._boundHandleStorage); | |
123 }, | |
124 | |
125 _handleStorage: function(ev) { | |
126 if (ev.key == this.name) { | |
127 this._load(true); | |
128 } | |
129 }, | |
130 | |
131 _trySaveValue: function(value, _loaded, autoSaveDisabled) { | |
132 if (this._justLoaded) { // guard against saving after _load() | |
133 this._justLoaded = false; | |
134 return; | |
135 } | |
136 if (_loaded && !autoSaveDisabled) { | |
137 this.save(); | |
138 } | |
139 }, | |
140 | |
141 /** | |
142 * Loads the value again. Use if you modify | |
143 * localStorage using DOM calls, and want to | |
144 * keep this element in sync. | |
145 */ | |
146 reload: function() { | |
147 this._load(); | |
148 }, | |
149 | |
150 /** | |
151 * loads value from local storage | |
152 * @param {Boolean} externalChange true if loading changes from a different
window | |
153 */ | |
154 _load: function(externalChange) { | |
155 var v = localStorage.getItem(this.name); | |
156 | |
157 if (v === null) { | |
158 this.fire('iron-localstorage-load-empty'); | |
159 } else if (!this.useRaw) { | |
160 try { | |
161 v = JSON.parse(v); | |
162 } catch(x) { | |
163 this.errorMessage = "Could not parse local storage value"; | |
164 console.error("could not parse local storage value", v); | |
165 } | |
166 } | |
167 | |
168 this._justLoaded = true; | |
169 this._loaded = true; | |
170 this.value = v; | |
171 this.fire('iron-localstorage-load', { externalChange: externalChange}); | |
172 }, | |
173 | |
174 /** | |
175 * Saves the value to localStorage. Call to save if autoSaveDisabled is set. | |
176 * If `value` is null, deletes localStorage. | |
177 */ | |
178 save: function() { | |
179 var v = this.useRaw ? this.value : JSON.stringify(this.value); | |
180 try { | |
181 if (this.value === null) { | |
182 localStorage.removeItem(this.name); | |
183 } else { | |
184 localStorage.setItem(this.name, v); | |
185 } | |
186 } | |
187 catch(ex) { | |
188 // Happens in Safari incognito mode, | |
189 this.errorMessage = ex.message; | |
190 console.error("localStorage could not be saved. Safari incoginito mode?"
, ex); | |
191 } | |
192 } | |
193 | |
194 }); | |
195 | |
196 </script> | |
OLD | NEW |