Jump to content
Sign in to follow this  
davej

HTML5 browser history -- history.pushState

Recommended Posts

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 by davej

Share this post


Link to post
Share on other sites
Mostly for things like preserving history when you're using ajax navigation.
Oh, that sounds reasonable. Thanks.

Share this post


Link to post
Share on other sites

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));}}

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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 by davej

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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 by davej

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...