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

Posted 2021-04-12

我试图找出如何在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类似的东西时，它只返回： 承诺{[[PromiseStatus]]：“已解决”，[[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);
           }
         });

答案

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

问题更多的是改变您对访问存储数据的看法。 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
}

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

另一答案

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

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

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