聚合物2：在不同页面之间传输属性值

Question

我下载了Skeleton-starter-kit应用程序并开始在Polymer中创建我的新网页项目。该应用程序有3个不同的页面。在第一页上，我使用iron-ajax和app-storage连接到API并将其值存储到本地存储。现在我想在项目的另外两个页面上使用存储在本地存储中的数据，但我不知道如何。我试过这个。$。propertyname但我只是未定义。我会感激任何帮助。

第一页：

  <dom-module id="first-page">
   <iron-ajax
                auto
                url="http://api.blog.diamondappgroup.com/blog/posts"
                handle-as="json"
                last-response="{{ajaxResponse}}">
    </iron-ajax>

    <app-indexeddb-mirror
      key="posts"
      data="{{ajaxResponse.data}}"
      persisted-data="{{persistedData}}">
    </app-indexeddb-mirror>



    <template is="dom-repeat" items={{persistedData}} as="data">
       <div id="{{index}}" class="imageTextContainer1" on-click="showPost">
       <a href="http://127.0.0.1:8081/view2"><img  id="{{index}}" src$="{{openedBlogImage}}" alt="Image Not Found" on-click="showPost"/></a>
        <h3 id="{{index}}" class="h3heading" on-click="showPost"> {{openedBlogName}} </h3>
        <p id="{{index}}" class="text" on-click="showPost">{{openedBlogBody}}</p>
      </div>
    </template>


<script>
class FirstPage Polymer.Element { 

    static get is() { return "first-page"; } 
static get properties() { return {
    persistedData: {
      type: Array
    },
    idnumber: {
      type: Number
      value: 5
    },
    openedBlogImage: {
      type: String
    },
    openedBlogName: {
      type: String
    },
    openedBlogBody: {
      type: String
    }
  }}

  json(obj) {
    return JSON.stringify(obj, null, 2);
  }

  showPost(event){
    var id = parseInt(event.target.id);
    this.idnumber = id;
    console.log("Id: " + this.idnumber);

    var image = this.persistedData[this.idnumber].images[0].path;
    console.log("Image: " + image);
    this.openedBlogImage = image;

    var name = this.persistedData[this.idnumber].name;
    console.log("Name: " + name);
    this.openedBlogName = name;

    var body = this.persistedData[this.idnumber].body;
    console.log("Body: " + body);
    this.openedBlogBody = body;

  }
 customElements.define(FirstPage.is, FirstPage);

第二页：

<div  on-click="showPost">
  <img src$="{{openedBlogImage}}" alt="Image Not Found"/>
  <h3  class="h3heading"> {{openedBlogName}} </h3>
  <p  class="text">{{openedBlogBody}}</p>
</div>

当我点击第一页的链接时，它会将我重定向到第二页。我想知道如何通过数据绑定使用第二页第一页上存储的数据。