Question

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

所以我做了：

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

但是当我回到历史中时，财产似乎并不存在。

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

使用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

修改window.history.state添加属性

1 个答案:

更新