如何在 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 进行类似操作时，它只是 returns:
Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]] : 未定义}
我找不到任何关于如何使用这个元素的例子。也许有人可以帮助我。

      <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);
           }
         });

Answer 1

我自己还在研究这个元素。文档并不是那么直接。这是我目前所了解的。

问题更多是关于改变您对访问存储数据的看法。 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" 的变量应该是对象类型。

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

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

Answer 2

基本思路是将内存中的数据同步到localStorage。

app-localstorage-document 将 'data' 存储在 localStorage 或 sessionStorage 中。数据的任何变化都会流回存储。在您的情况下，您只需将 {{meta}} 对象设置为所需的值，app-localstorage-document 将确保它存储在本地存储中。

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

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

How to work with app-localstorage-document in Polymer

session

local-storage

polymer

polymer-1.0