如何在Polymer中使用app-localstorage-document

Question

我正在尝试弄清楚如何在app-localstorage-document中设置和检索值。我之前使用过iron-meta元素，并像这样做：

      <iron-meta id="meta" key="id" value="{{meta}}"></iron-meta>          

      Polymer({
         is: 'login-form',
         properties: {
           meta: {
            type: String,
            value: ''
           },
         },

         getValue: function() {
           this.meta = '100'
           var savedValue = this.$.meta.byKey('id');
           console.log(savedValue);
         }

      });

但是，当我尝试使用app-localstorage-document做类似操作时，它只返回：
Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined}
我找不到任何关于如何使用此元素的示例。也许有人可以在这里帮助我。

      <app-localstorage-document id="meta" key="id" data="{{meta}}" storage="window.localStorage"></app-localstorage-document>

         Polymer({
          is: 'login-form',
           properties: {
             meta: {
               type: String,
               value: ''
             },
           },

           getValue: function() {
             this.$.meta.setStoredValue('id', '50');
             var savedValue = this.$.meta.getStoredValue('id');
             console.log(savedValue);
           }
         });

- Niklas

Answer 1

基本思想是将内存中的数据与localStorage同步。 app-localstorage-document 将 'data' 存储在 localStorage 或 sessionStorage 中。数据的任何更改都会回流到存储中。在您的情况下，您只需要设置 {{meta}} 对象的所需值，app-localstorage-document 将确保它被存储在本地存储中。

由于您始终可以使用内存中的数据工作，因此可能不会在同一元素中从localStorage读取数据。但是，为了在其他元素中读取存储的数据，您可以使用 iron-localstorage 或者直接使用键从localStorage中读取。

- Suhas Pachore

Answer 2

我自己还在学习这个元素。文档有些含糊不清。目前我理解的是：

问题更多地涉及于改变你对访问存储数据的方式。app-localstorage-document 元素会为你处理它。

<app-localstorage-document id="meta" key="id" data="{{meta}}" storage="window.localStorage"></app-localstorage-document>

属性"data"与"id"的存储键同步。每当"id"更新时，分配给"data"的变量也会更新。这意味着对"Id"键的更改将向变量"meta"冒泡。

如果您需要访问存储中的信息，应该在"meta"变量中访问。

this.meta.name or {{meta.name}}
this.meta.id or {{meta.id}}

这意味着被赋给"data"的变量应该是Object类型。

meta:{
        type:Object,
        value:{},
        notify:true
}

因此，如果您正在使用该元素，则没有理由直接访问本地存储。这就是该元素的作用。

- justonpoints

---

如果一切顺利，我会尝试并接受您的答案。最终我使用了iron-localstorage，因为它似乎更容易使用。 - Niklas

我一定漏掉了什么——它没有起作用。当我重新加载页面时，值被清除而不是显示上次使用的值。iron-localstorage 起作用了。 - Thad

如何使用isNew()方法在键值未存储时初始化数值？ - Amanshu Kataria