javascript – 修改window.history.state添加属性

我想在window.history.state中添加一个名为html的属性,以便稍后使用.

所以我做了：

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

但是当我回到历史时,财产似乎并不存在.

我尝试了window.history.replaceState并复制了所有状态的属性,并添加了我需要的属性,但首先它似乎正在进行另一个状态推送,这意味着历史记录中的重复URL并且它似乎也不能很好地工作.

有没有使用history api的解决方案,还是应该创建一个单独的数组并将其链接到每个pushstate(更复杂)？

解决方法:

根据Mozilla MDN,

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

然后

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.

总而言之,要向history.state对象添加属性,需要将其传递给history.pushState(),然后可以恢复它绑定popstate事件.

更新

如评论中所述,您需要更新已推送的状态.如你所说,

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.

我不确定什么似乎不能很好地工作,但我很确定这是你需要的,所以我会试着解释它是如何工作的：

0)在页面加载时,history.state为null

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

1)首先,让我们为popstate事件设置一个监听器,向我们显示当前状态

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

2)然后开始推动一些状态

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)然后通过添加新属性,某些东西会让你改变(替换)这个最后的状态

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

4)此时,history.state已更新

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

5)推送你需要的任何其他状态

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

6)然后,用户点击后退按钮,触发popstate事件.

// Simulate back button
history.back();

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

7)然后,每次返回时,它会一直弹出状态,直到达到初始的空状态.

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

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

history.back();
// Output: null

标签：pushstate,html,javascript,html5-history
来源： https://codeday.me/bug/20190824/1708158.html