Polymer 2: Transfer property values among different pages - data-binding

Question

I downloaded Skeleton-starter-kit application and started creating my new web page project in Polymer. The application has 3 different pages. On the first page I used iron-ajax and app-storage to connect to the API and store its values to the local storage. Now I would like to use data stored in that local storage on the other two pages of the project but I dont know how. I tried with this.$.propertyname but I only got undefined. I would appreciate any kind of help.
First page:
<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">
<img id="{{index}}" src$="{{openedBlogImage}}" alt="Image Not Found" on-click="showPost"/>
<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);
Second page:
<div on-click="showPost">
<img src$="{{openedBlogImage}}" alt="Image Not Found"/>
<h3 class="h3heading"> {{openedBlogName}} </h3>
<p class="text">{{openedBlogBody}}</p>
</div>
When I click on the a link at the first page it redirect me to the second page. I would like to know how to use data stored on the first page at the second page through data binding.