How to work with app-localstorage-document in Poly

问题:

I am trying to figure out how to set and retrieve a value in the app-localstorage-document. I worked before with the iron-meta element and did it like so:

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

      });

But when I try something similar with the app-localstorage-document it just returns:
Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined}
I cant find any example on how to work with this element. Maybe someone can help me out here.

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

回答1:

I am still studying this element myself. The documentation is not all that direct. This what I understand so far.

The issue is more about changing the way you think about accessing the storage data. The app-localstorage-document element is handling it for you.

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

The attribute "data" is synced with the storage key of "id". Any time "id" is updated, the variable assigned to "data" is updated. This means in this changes to the key "id" will bubble up into the variable "meta".

If you need to access information in storage, it should be accessible in the "meta" variable.

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

This would imply that the variable assigned to "data" should be of type Object.

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

As a result, if you are using this element, there is no reason to directly access local storage. That is what this element is for.

回答2:

The basic idea is to synchronize in-memory data to localStorage.

app-localstorage-document stores the 'data' in localStorage or sessionStorage. Any change in data flows back to storage. In your case, you just need to set the {{meta}} object with desired values, and app-localstorage-document will ensure that it is stored in local storage.

As you can always work with in-memory data, you might not read the data from localStorage in the same element. However, to read the stored data in other elements, you could use iron-localstorage or even directly read from localStorage with the key.