修改window.history.state添加属性

Question

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

所以我做了:

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

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

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

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

Answer 1

据Mozilla MDN称,

pushState()接受三个参数:状态对象,标题(当前被忽略)和(可选)URL.

然后

state对象是一个JavaScript对象,它与pushState()创建的新历史记录条目相关联.每当用户导航到新状态时,都会触发popstate事件,并且事件的state属性包含历史记录条目的状态对象的副本.

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

更新

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

我尝试了window.history.replaceState并复制了所有状态的属性并添加了我需要的属性但是(...)它似乎不能很好地工作.

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

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

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)然后,每次你返回时,它会一直弹出状态,直到它达到初始null状态.

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

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

history.back();
// Output: null