javascript - Modify window.history.state add a property - Stack Overflow

admin管理员组

文章数量:1296893

I want to add a property called html to window.history.state so I can use it later.

So I did:

window.history.state.html = 'something';

But when I go back in history the property doesn't seem to be there.

I tried window.history.replaceState and copy all the state's properties and added the one I needed but first it seems to be making another state push which means duplicate urls in history and also it doesn't seem to work very well.

Is there a solution for this using the history api or should I create a separate array and link it to each pushstate (more plicated) ?

I want to add a property called html to window.history.state so I can use it later.

So I did:

window.history.state.html = 'something';

But when I go back in history the property doesn't seem to be there.

I tried window.history.replaceState and copy all the state's properties and added the one I needed but first it seems to be making another state push which means duplicate urls in history and also it doesn't seem to work very well.

Is there a solution for this using the history api or should I create a separate array and link it to each pushstate (more plicated) ?

• javascript
• html
• pushstate
• html5-history

Share Follow asked Sep 23, 2015 at 22:56 madpropsmadprops 4,02366 gold badges3535 silver badges4242 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

According to Mozilla MDN,

pushState() takes three parameters: a state object, a title (which is currently ignored), and (optionally) a URL.

And then

The state object is a JavaScript object which is associated with the new history entry created by pushState(). Whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object.

So in conclusion, to add a property to the history.state object, you need to pass it to history.pushState() and you can recover it binding the popstate event.

---

Update

As said in ments, you need to update the state that you already pushed. As you said,

I tried window.history.replaceState and copy all the state's properties and added the one I needed but (...) it doesn't seem to work very well.

I'm not sure about what doesn't seem to work very well means, but I'm pretty sure that it's what you need, so I'll try to explain how it really works:

0) At page load, the history.state is null

console.log(history.state);
// Output: null

1) First of all, let's set a listener to the popstate event that shows us the current state

window.onpopstate = function(s) { console.log(s.state); }

2) Then start to push some states

history.pushState({first:1}, document.title);
history.pushState({second:2}, document.title);
history.pushState({third:3}, document.title);

console.log(history.state);
// Output: {third:3}

3) Then something makes you change (replace) this last state, by adding a new property

var st = history.state;
st.myNewProp = "testing";
history.replaceState(st, document.title);

4) At this point, history.state is updated

console.log(history.state);
// Output: {third:3, myNewProp: "testing"}

5) Push any other state you need

history.pushState({another:4}, document.title);

6) Then, the user hits the back button, and the popstate event is triggered.

// Simulate back button
history.back();

// Output: {third:3, myNewProp: "testing"}

7) Then, each time you go back, it keeps poping the states until it reaches the initial null state.

history.back();
// Output: {second:2}

history.back();
// Output: {first:1}

history.back();
// Output: null

本文标签： javascriptModify windowhistorystate add a propertyStack Overflow