Polymer: Step through array on button click - arrays

Question

I am trying to update the URL bar on a button press, and cycle through JSON objects that are declared in the tag array.
The iterator works fine when the window.location.href = "http://localhost:777/tag/" + this.tag[this.counter]; line is commented out, but gets stuck on the first array item when this line is active.
I think counter gets reset when the page is refreshed. Is there a good way to save the state of the counter so I can cycle through the array as the URL changes?
<template>
<paper-button class="menu-button" on-tap="leftArrowButton">Button Text</paper-button>
</template>
<script>
Polymer({
is: 'sub-menu',
properties: {
tag: {
type: Array,
value: function () {
return ['one', 'two', 'three', 'four'];
}
},
counter: {
type: Number,
value: 0
}
},
leftArrowButton: function (e) {
this.counter = (this.counter + 1) % this.tag.length;
console.log(this.counter);
console.log(this.tag.length);
console.log(this.tag[this.counter]);
console.log("http://localhost:777/tag/" + this.tag[this.counter])
window.location.href = "http://localhost:777/tag/" + this.tag[this.counter];
}
});
</script>

Answer 1

You need a router to manage your app's state between pages. Check out app-route. It was built by the Polymer team as a "web components" approach to routing.

Answer 2

Using your links will reload the page and reset the counter. You might either want to use hashbang in your URLs like http://localhost:777/tag#one or query params like http://localhost:777/tag?choice=one. Prior will prevent a page load, latter won't but lets you parse the link (see below).
If altering the link structure is no option you could read the currently selected option from location.pathname in leftArrowButton, calculate the index of the corresponding tag entry, choose the next and build your link with that:
leftArrowButton: function (e) {
var current = location.href.substr(location.href.lastIndexOf('/') + 1);
var index = this.tag.indexOf(current);
var counter = (index + 1) % tags.length;
...