src/third_party/polymer/components/core-localstorage/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     attached: function() {
  76       // wait for bindings are all setup
  77       this.async('load');
  78     },
  79
  80     valueChanged: function() {
  81       if (this.loaded && !this.autoSaveDisabled) {
  82         this.save();
  83       }
  84     },
  85
  86     load: function() {
  87       var v = localStorage.getItem(this.name);
  88       if (this.useRaw) {
  89         this.value = v;
  90       } else {
  91         // localStorage has a flaw that makes it difficult to determine
  92         // if a key actually exists or not (getItem returns null if the
  93         // key doesn't exist, which is not distinguishable from a stored
  94         // null value)
  95         // however, if not `useRaw`, an (unparsed) null value unambiguously
  96         // signals that there is no value in storage (a stored null value would
  97         // be escaped, i.e. "null")
  98         // in this case we save any non-null current (default) value
  99         if (v === null) {
 100           if (this.value !== null) {
 101             this.save();
 102           }
 103         } else {
 104           try {
 105             v = JSON.parse(v);
 106           } catch(x) {
 107           }
 108           this.value = v;
 109         }
 110       }
 111       this.loaded = true;
 112       this.asyncFire('core-localstorage-load');
 113     },
 114
 115     /**
 116      * Saves the value to localStorage.
 117      *
 118      * @method save
 119      */
 120     save: function() {
 121       var v = this.useRaw ? this.value : JSON.stringify(this.value);
 122       localStorage.setItem(this.name, v);
 123     }
 124
 125   });
 126
 127 </script>
 128 </polymer-element>