├── README.md
├── bower.json
├── core-localstorage.html
├── demo.html
├── index.html
└── test
    ├── basic.html
    ├── index.html
    ├── raw.html
    └── value-binding.html


/README.md:
--------------------------------------------------------------------------------
1 | core-localstorage
2 | =================
3 | 
4 | **This element is compatible with Polymer 0.5 and lower only, and will be deprecated.**  
5 | You can check out a similar 0.8-compatible version of this element at [https://github.com/polymerelements/iron-localstorage](https://github.com/polymerelements/iron-localstorage)
6 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "core-localstorage",
 3 |   "private": true,
 4 |   "dependencies": {
 5 |     "polymer": "Polymer/polymer#master"
 6 |   },
 7 |   "devDependencies": {
 8 |     "web-component-tester": "Polymer/web-component-tester#^1.1.0"
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/core-localstorage.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
  3 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  4 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  5 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  6 | Code distributed by Google as part of the polymer project is also
  7 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  8 | -->
  9 | 
 10 | <!--
 11 | Element access to localStorage.  The "name" property
 12 | is the key to the data ("value" property) stored in localStorage.
 13 | 
 14 | `core-localstorage` automatically saves the value to localStorage when
 15 | value is changed.  Note that if value is an object auto-save will be
 16 | triggered only when value is a different instance.
 17 | 
 18 |     <core-localstorage name="my-app-storage" value="{{value}}"></core-localstorage>
 19 | 
 20 | @group Polymer Core Elements
 21 | @element core-localstorage
 22 | @blurb Element access to localStorage.
 23 | @url github.io
 24 | @categories Data
 25 | -->
 26 | 
 27 | <link rel="import" href="../polymer/polymer.html">
 28 | 
 29 | <polymer-element name="core-localstorage" attributes="name value useRaw autoSaveDisabled" hidden>
 30 | <script>
 31 | 
 32 |   Polymer('core-localstorage', {
 33 |     
 34 |     /**
 35 |      * Fired when a value is loaded from localStorage.
 36 |      * @event core-localstorage-load
 37 |      */
 38 |      
 39 |     /**
 40 |      * The key to the data stored in localStorage.
 41 |      *
 42 |      * @attribute name
 43 |      * @type string
 44 |      * @default null
 45 |      */
 46 |     name: '',
 47 |     
 48 |     /**
 49 |      * The data associated with the specified name.
 50 |      *
 51 |      * @attribute value
 52 |      * @type object
 53 |      * @default null
 54 |      */
 55 |     value: null,
 56 |     
 57 |     /**
 58 |      * If true, the value is stored and retrieved without JSON processing.
 59 |      *
 60 |      * @attribute useRaw
 61 |      * @type boolean
 62 |      * @default false
 63 |      */
 64 |     useRaw: false,
 65 |     
 66 |     /**
 67 |      * If true, auto save is disabled.
 68 |      *
 69 |      * @attribute autoSaveDisabled
 70 |      * @type boolean
 71 |      * @default false
 72 |      */
 73 |     autoSaveDisabled: false,
 74 |     
 75 |     valueChanged: function() {
 76 |       if (this.loaded && !this.autoSaveDisabled) {
 77 |         this.save();
 78 |       }
 79 |     },
 80 | 
 81 |     nameChanged: function() {
 82 |       this.load();
 83 |     },
 84 |     
 85 |     load: function() {
 86 |       var v = localStorage.getItem(this.name);
 87 |       if (this.useRaw) {
 88 |         this.value = v;
 89 |       } else {
 90 |         // localStorage has a flaw that makes it difficult to determine
 91 |         // if a key actually exists or not (getItem returns null if the
 92 |         // key doesn't exist, which is not distinguishable from a stored
 93 |         // null value)
 94 |         // however, if not `useRaw`, an (unparsed) null value unambiguously
 95 |         // signals that there is no value in storage (a stored null value would
 96 |         // be escaped, i.e. "null")
 97 |         // in this case we save any non-null current (default) value
 98 |         if (v === null) {
 99 |           if (this.value != null) {
100 |             this.save();
101 |           }
102 |         } else {
103 |           try {
104 |             v = JSON.parse(v);
105 |           } catch(x) {
106 |           }
107 |           this.value = v;
108 |         }
109 |       }
110 |       this.loaded = true;
111 |       this.asyncFire('core-localstorage-load');
112 |     },
113 |     
114 |     /** 
115 |      * Saves the value to localStorage.
116 |      *
117 |      * @method save
118 |      */
119 |     save: function() {
120 |       var v = this.useRaw ? this.value : JSON.stringify(this.value);
121 |       localStorage.setItem(this.name, v);
122 |     }
123 |     
124 |   });
125 | 
126 | </script>
127 | </polymer-element>
128 | 


--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 |     @license
 3 |     Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 4 |     This code may only be used under the BSD style license found at http://polymer.github.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/CONTRIBUTORS.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/PATENTS.txt
 9 | -->
10 | <!doctype html>
11 | <html>
12 | <head>
13 | 
14 |   <title>polymer-localstorage</title>
15 | 
16 |   <script src="../webcomponentsjs/webcomponents.js"></script>
17 | 
18 |   <link rel="import" href="core-localstorage.html">
19 | 
20 | </head>
21 | <body>
22 | 
23 |   <x-test1></x-test1>
24 | 
25 |   <polymer-element name="x-test1" noscript>
26 |     <template>
27 |       string entered below will be stored in localStorage and automatically retrived from localStorage when the page is reloaded<br>
28 |       <input value="{{value}}">
29 |       <core-localstorage name="polymer-localstorage-x-test1" value="{{value}}"></core-localstorage>
30 |     </template>
31 |   </polymer-element>
32 | 
33 |   <br><br>
34 | 
35 |   <x-test2></x-test2>
36 | 
37 |   <polymer-element name="x-test2">
38 |     <template>
39 |       <input type="checkbox" checked="{{mode}}">
40 |       <core-localstorage name="polymer-localstorage-x-test2" value="{{mode}}"></core-localstorage>
41 |     </template>
42 |     <script>
43 |       Polymer('x-test2', {
44 |         mode: false
45 |       });
46 |     </script>
47 |   </polymer-element>
48 | 
49 | </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
 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/PATENTS
 9 | -->
10 | <html>
11 | <head>
12 | 
13 |   <script src="../webcomponentsjs/webcomponents.js"></script>
14 |   <link rel="import" href="../core-component-page/core-component-page.html">
15 | 
16 | </head>
17 | <body unresolved>
18 | 
19 |   <core-component-page></core-component-page>
20 | 
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/test/basic.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.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/CONTRIBUTORS.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/PATENTS.txt
 9 | -->
10 | <html>
11 | <head>
12 |   <meta charset="UTF-8">
13 |   <title>core-localstorage-basic</title>
14 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
15 | 
16 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
17 |   <script src="../../web-component-tester/browser.js"></script>
18 |   
19 |   <link rel="import" href="../core-localstorage.html">
20 | 
21 | </head>
22 | <body>
23 | 
24 |   <core-localstorage id="localstorage" name="core-localstorage-test"></core-localstorage>
25 | 
26 |   <script>
27 | 
28 |     window.localStorage.setItem('core-localstorage-test', '{"foo":"bar"}');
29 |     var storage = document.querySelector('#localstorage');
30 |     
31 |     suite('basic', function() {
32 | 
33 |       test('load', function() {
34 |         assert.isNotNull(storage.value);
35 |         assert.equal(storage.value.foo, 'bar');
36 |       });
37 |       
38 |       test('save', function(done) {
39 |         var newValue = {'foo': 'zot'};
40 |         storage.value = newValue;
41 |         asyncPlatformFlush(function() {
42 |           var v = window.localStorage.getItem(storage.name);
43 |           v = JSON.parse(v);
44 |           assert.equal(v.foo, newValue.foo);
45 |           done();
46 |         });
47 |       });
48 | 
49 |     });
50 | 
51 |   </script>
52 | 
53 | </body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.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/CONTRIBUTORS.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/PATENTS.txt
 9 | -->
10 | <html>
11 | <head>
12 |   <meta charset="UTF-8">
13 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
14 |   <title>Tests</title>
15 |   <script src="../../web-component-tester/browser.js"></script>
16 | </head>
17 | <body>
18 |   <script>
19 |     WCT.loadSuites([
20 |       'basic.html',
21 |       'raw.html',
22 |       'value-binding.html'
23 |     ]);
24 |   </script>
25 | </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/test/raw.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.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/CONTRIBUTORS.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/PATENTS.txt
 9 | -->
10 | <html>
11 | <head>
12 |   <meta charset="UTF-8">
13 |   <title>core-localstorage-raw</title>
14 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
15 | 
16 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
17 |   <script src="../../web-component-tester/browser.js"></script>
18 |   
19 |   <link rel="import" href="../core-localstorage.html">
20 | 
21 | </head>
22 | <body>
23 | 
24 |   <core-localstorage id="localstorage" useRaw name="core-localstorage-test"></core-localstorage>
25 | 
26 |   <script>
27 | 
28 |     window.localStorage.setItem('core-localstorage-test', 'hello world');
29 |     var storage = document.querySelector('#localstorage');
30 |     
31 |     suite('basic', function() {
32 | 
33 |       test('load', function() {
34 |         assert.equal(storage.value, 'hello world');
35 |       });
36 |       
37 |       test('save', function(done) {
38 |         var m = 'goodbye';
39 |         storage.value = m;
40 |         asyncPlatformFlush(function() {
41 |           var v = window.localStorage.getItem(storage.name);
42 |           assert.equal(v, m);
43 |           done();
44 |         });
45 |       });
46 | 
47 |     });
48 | 
49 |   </script>
50 | 
51 | </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/test/value-binding.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.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/CONTRIBUTORS.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/PATENTS.txt
 9 | -->
10 | <html>
11 | <head>
12 |   <meta charset="UTF-8">
13 |   <title>core-localstorage-value-binding</title>
14 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
15 | 
16 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
17 |   <script src="../../web-component-tester/browser.js"></script>
18 |   
19 |   <link rel="import" href="../core-localstorage.html">
20 | 
21 | </head>
22 | <body>
23 | 
24 |   <polymer-element name="x-foo" attributes="value" noscript>
25 |     <template>
26 |       <div>{{value.foo}}</div>
27 |     </template>
28 |   </polymer-element>
29 | 
30 |   <polymer-element name="x-test" attributes="value" noscript>
31 |     <template>
32 |       <x-foo value="{{value}}"></x-foo>
33 |       <core-localstorage id="localstorage" name="core-localstorage-test" value="{{value}}"></core-localstorage>
34 |     </template>
35 |   </polymer-element>
36 |   
37 |   <x-test></x-test>
38 | 
39 |   <script>
40 | 
41 |     window.localStorage.setItem('core-localstorage-test', '{"foo":"bar"}');
42 |     var xtest = document.querySelector('x-test');
43 |     
44 |     suite('basic', function() {
45 | 
46 |       test('initial value', function() {
47 |         assert.isNotNull(xtest.value);
48 |         assert.equal(xtest.value.foo, 'bar');
49 |       });
50 |       
51 |       test('set value', function(done) {
52 |         var newValue = {'foo': 'zot'};
53 |         xtest.value = newValue;
54 |         asyncPlatformFlush(function() {
55 |           var v = window.localStorage.getItem(xtest.$.localstorage.name);
56 |           v = JSON.parse(v);
57 |           assert.equal(v.foo, newValue.foo);
58 |           done();
59 |         });
60 |       });
61 |       
62 |       test('save', function(done) {
63 |         xtest.value.foo = 'quux';
64 |         xtest.$.localstorage.save();
65 |         asyncPlatformFlush(function() {
66 |           var v = window.localStorage.getItem(xtest.$.localstorage.name);
67 |           v = JSON.parse(v);
68 |           assert.equal(v.foo, 'quux');
69 |           done();
70 |         });
71 |       });
72 | 
73 |     });
74 |     
75 |   </script>
76 | 
77 | </body>
78 | </html>
79 | 


--------------------------------------------------------------------------------