Question

我在我的应用程序中使用app-localstorage-document。我正在尝试在connectedCallback()上获取本地存储数据，但是这些值不会加载。以前我使用iron-localstorage，其中我使用on-iron-localstorage-load事件方法在加载页面时加载值。但我无法在app-localstorage-document中找到如何使用类似方法加载值。

以下是代码实例：

<app-localstorage-document id="catKey" key="CatValue" data="{{cat}}" storage="window.localstorage"></app-localstorage-document>
    <paper-input value="{{cat}}"></paper-input>
    <p>It is {{cat}}</p>
</template>
<script>
    class MyApp extends Polymer.Element {
      static get is() { return 'my-app'; }
      static get properties() {
        return {
          cat: {
            type: String
          }
        };
      }
      connectedCallback() {
        super.connectedCallback();
        console.log(this.cat);
      }
</script>

如果我在控件位于connectedCallback()时控制数据，则会打印undefined。但是，如果我尝试将其加载到其他函数中，则可以加载这些值。

Answer 1

延迟函数调用，直到使用如下的观察者设置值：

<template>
  <app-localstorage-document id="catKey" key="CatValue" data="{{cat}}"
      storage="window.localstorage"></app-localstorage-document>
  <paper-input value="{{cat}}"></paper-input>
  <p>It is {{cat}}</p>
</template>
<script>
class MyApp extends Polymer.Element {
  static get is() { return 'my-app'; }
  static get properties() {
    return {
      cat: {
        type: String,
        observer: 'catChanged',
      },
    };
  }
  catChanged() {
    console.log(this.cat);
  }
</script>

为什么无法在Polymer 2中的connectedCallback上加载localstorage值？

1 个答案: