| Index: samples/third_party/todomvc_performance/js_todomvc/components/polymer-localstorage/polymer-localstorage.html
|
| diff --git a/samples/third_party/todomvc_performance/js_todomvc/components/polymer-localstorage/polymer-localstorage.html b/samples/third_party/todomvc_performance/js_todomvc/components/polymer-localstorage/polymer-localstorage.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..0bfc2031073d58e6adb074cdd0a29a8f84a71bfa
|
| --- /dev/null
|
| +++ b/samples/third_party/todomvc_performance/js_todomvc/components/polymer-localstorage/polymer-localstorage.html
|
| @@ -0,0 +1,127 @@
|
| +<!--
|
| +Copyright 2013 The Polymer Authors. All rights reserved.
|
| +Use of this source code is governed by a BSD-style
|
| +license that can be found in the LICENSE file.
|
| +-->
|
| +<!--
|
| +/**
|
| + * @module Polymer Elements
|
| + */
|
| +/**
|
| + * Element access to localStorage. The "name" property
|
| + * is the key to the data ("value" property) stored in localStorage.
|
| + *
|
| + * polymer-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.
|
| + *
|
| + * Example:
|
| + *
|
| + * <polymer-localstorage name="my-app-storage" value="{{value}}"></polymer-localstorage>
|
| + *
|
| + * @class polymer-localstorage
|
| + * @blurb Element access to localStorage.
|
| + * @snap http://polymer.github.io/polymer-localstorage/snap.png
|
| + * @author The Polymer Authors
|
| + * @categories Data
|
| + *
|
| + */
|
| +/**
|
| + * Fired after it is loaded from localStorage.
|
| + *
|
| + * @event polymer-localstorage-load
|
| + */
|
| +-->
|
| +<link rel="import" href="../polymer/polymer.html">
|
| +
|
| +<polymer-element name="polymer-localstorage" attributes="name value useRaw autoSaveDisabled">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + display: none;
|
| + }
|
| + </style>
|
| + </template>
|
| + <script>
|
| + Polymer('polymer-localstorage', {
|
| + /**
|
| + * 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,
|
| + enteredView: 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('polymer-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>
|
|
|