HTML5 browser history -- history.pushState

[davej]

So what is the primary usefulness of this? I don't even like the idea of a site being able to mess with the browser history. I have a little demo that pushes and pops but it seems pointless to me. Thanks https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history

Edited November 27, 2012 by davej

[justsomeguy]

Mostly for things like preserving history when you're using ajax navigation.

[davej]

Mostly for things like preserving history when you're using ajax navigation.

Oh, that sounds reasonable. Thanks.

[davej]

I am still having issues with this feature. I would think that the proper sequence would be:

history.replaceState(...) /* initialization */history.pushState(...)history.replaceState(...)history.pushState(...)history.replaceState(...)history.pushState(...)history.replaceState(...)history.back()history.back()history.back()

But somehow this isn't working right, because although I push known objects onto the stack, I don't see same pushtime field later when I pop.

function go(){var d = new Date();var savedStateObj = { page: currentPage, pushtime: d, previous: previousPage };alert('pushState:' + JSON.stringify(savedStateObj) + '[Page' + currentPage + ']' + "?page=" + currentPage);history.pushState( savedStateObj, 'Page ' + currentPage, "?page=" + currentPage);}window.onpopstate = function(event) { //history pop state handlerif (event.state !== null) {alert('popevent: state:' + JSON.stringify(event.state));}}

[justsomeguy]

I'm not sure what you're doing with all the replacing and pushing, but are you saying that the date object is not included in the state object, but the other properties are there?

[davej]

Yes, the strange thing is that it seems to work, but there is something that isn't quite working. I probably need to verify the legal parameters that can be used with history.pushState(). The example seems to show that the parameters are an object, a page title, and a path. Perhaps there are restrictions on the object? I decided to put the current time in the object but maybe that can't be done.

[justsomeguy]

The object gets serialized, so you can put anything there that is serializable.

I decided to put the current time in the object but maybe that can't be done.

You're putting an entire date object there. You can use valueOf to get the integer timestamp.

[davej]

Found this article... https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history All I wanted was a timestamp. Is there a sizeof I can use on objects?

[justsomeguy]

The date object's valueOf method returns an integer timestamp. There are ways to get the number of properties in an object if you want to do that also.

[davej]

I'm not sure what you're doing with all the replacing and pushing, but are you saying that the date object is not included in the state object, but the other properties are there?

Well, is that maybe my problem? When you use pushState() does the specified state get pushed or does the current state get pushed? In order to insert the time of the push maybe I need to use replaceState() to insert the time and then use pushState()? Edited December 4, 2012 by davej

[justsomeguy]

Push adds a new state to the stack, replace replaces the one on the top of the stack. It just didn't really make sense to me why you're replacing 4 times, pusing 3 times, and then going back 3 times. If you're just trying to add the time then you probably only need either one push or one replace, depending on what you're trying to do.

[davej]

Push adds a new state to the stack, replace replaces the one on the top of the stack. It just didn't really make sense to me why you're replacing 4 times, pusing 3 times, and then going back 3 times.

Oh, that was just an example of the sequence of events -- of going three deep and then popping back to the starting point. Edited December 4, 2012 by davej