todomvc/examples/polymer/bower_components/core-localstorage/core-localstorage.html

> Helping you select an MV\* framework

<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!--
Element access to localStorage.  The "name" property
is the key to the data ("value" property) stored in localStorage.

`core-localstorage` automatically saves the value to localStorage when
value is changed.  Note that if value is an object auto-save will be
triggered only when value is a different instance.

    <core-localstorage name="my-app-storage" value="{{value}}"></core-localstorage>

@group Polymer Core Elements
@element core-localstorage
@blurb Element access to localStorage.
@url github.io
@categories Data
-->

<link rel="import" href="../polymer/polymer.html">

<polymer-element name="core-localstorage" attributes="name value useRaw autoSaveDisabled" hidden>
<script>

  Polymer('core-localstorage', {

    /**
     * Fired when a value is loaded from localStorage.
     * @event core-localstorage-load
     */

    /**
     * The key to the data stored in localStorage.
     *
     * @attribute name
     * @type string
     * @default null
     */
    name: '',

    /**
     * The data associated with the specified name.
     *
     * @attribute value
     * @type object
     * @default null
     */
    value: null,

    /**
     * If true, the value is stored and retrieved without JSON processing.
     *
     * @attribute useRaw
     * @type boolean
     * @default false
     */
    useRaw: false,

    /**
     * If true, auto save is disabled.
     *
     * @attribute autoSaveDisabled
     * @type boolean
     * @default false
     */
    autoSaveDisabled: false,

    attached: function() {
      // wait for bindings are all setup
      this.async('load');
    },

    valueChanged: function() {
      if (this.loaded && !this.autoSaveDisabled) {
        this.save();
      }
    },

    load: function() {
      var v = localStorage.getItem(this.name);
      if (this.useRaw) {
        this.value = v;
      } else {
        // localStorage has a flaw that makes it difficult to determine
        // if a key actually exists or not (getItem returns null if the
        // key doesn't exist, which is not distinguishable from a stored
        // null value)
        // however, if not `useRaw`, an (unparsed) null value unambiguously
        // signals that there is no value in storage (a stored null value would
        // be escaped, i.e. "null")
        // in this case we save any non-null current (default) value
        if (v === null) {
          if (this.value !== null) {
            this.save();
          }
        } else {
          try {
            v = JSON.parse(v);
          } catch(x) {
          }
          this.value = v;
        }
      }
      this.loaded = true;
      this.asyncFire('core-localstorage-load');
    },

    /**
     * Saves the value to localStorage.
     *
     * @method save
     */
    save: function() {
      var v = this.useRaw ? this.value : JSON.stringify(this.value);
      localStorage.setItem(this.name, v);
    }

  });

</script>
</polymer-element>