title: Why localstorage values can't be loaded on connectedCallback in Polymer 2?
body: <p>I'm using <a href="https://www.webcomponents.org/element/PolymerElements/app-storage/elements/app-localstorage-document" rel="nofollow noreferrer">app-localstorage-document</a> in my application. I'm trying to get local storage data on <code>connectedCallback()</code> but, the values don't load. Previously I used <a href="https://www.webcomponents.org/element/PolymerElements/iron-localstorage/elements/iron-localstorage" rel="nofollow noreferrer">iron-localstorage</a>, in which I used <code>on-iron-localstorage-load</code>event method to load the values when the page is loaded. But I'm not able to find out how to load values using similar method in <code>app-localstorage-document</code>.</p>
  
  <p>Below is the instance of code:</p>
  
  <pre><code>&lt;app-localstorage-document id="catKey" key="CatValue" data="{{cat}}" storage="window.localstorage"&gt;&lt;/app-localstorage-document&gt;
      &lt;paper-input value="{{cat}}"&gt;&lt;/paper-input&gt;
      &lt;p&gt;It is {{cat}}&lt;/p&gt;
  &lt;/template&gt;
  &lt;script&gt;
      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);
        }
  &lt;/script&gt;
  </code></pre>
  
  <p>If I console the data while the control is in <code>connectedCallback()</code>, it prints <code>undefined</code>. However, the values can be loaded if I try to load it in some other function.</p>