How to work with app-localstorage-document in Polymer

Question

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

Answer 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.