刷新时清除 pushState 创建的 html 历史记录答案

【问题标题】：Clear html history created by pushState on refresh刷新时清除 pushState 创建的 html 历史记录
【发布时间】：2014-05-23 07:14:18
【问题描述】：

我在 history.state 中有状态数组和数组索引，在 popstate 上我读取了数组的内容，它工作正常，但是当我返回第一页并刷新数组时消失了（这是正常的）但前向历史状态仍然存在。

是否可以删除使用 pushState 创建的虚假历史记录？

我无法将状态存储在 localStorage 中，因为我的状态数组中有函数。

【问题讨论】：

【解决方案1】：

window.history.replaceState('page', '');

页面加载时的此代码将阻止双后退按钮

【讨论】：

【解决方案2】：

我的想法 - 覆盖整个历史：

for (i = 0; i < 50; i++) {
  history.pushState({}, '');
}

【讨论】：

【解决方案3】：

无法清除会话历史记录或禁用来自非特权代码的后退/前进导航。最接近的可用解决方案是 location.replace() 方法，它替换当前具有提供的 URL 的会话历史记录项。 Mozilla

唯一的办法就是这样（但我想你知道）

var length=history.length;     
history.go(-length);
window.location.replace("urlToRedirect");

使用 replace() 后，当前页面将不会保存在会话历史记录中，这意味着用户将无法使用后退按钮导航到该页面。

【讨论】：

【解决方案4】：

如果您阅读了specification of History API for pushState，则在第 4 步中说明

如果调用的方法是 pushState() 方法：
删除当前条目之后浏览上下文会话历史记录中的所有条目。如果当前条目是会话历史记录中的最后一个条目，则不会删除任何条目。

因此，根据您要执行的操作，您可以为首次加载页面并推送状态（您将考虑您的第一个状态）做一个特殊情况，并且这样做清楚历史的前进状态。

【讨论】：

几乎可以工作，但是当我创建 pushState onInit (refresh) 时，我有两个历史页面，原始真实页面和来自 pushState 的假页面。 replaceState 也不起作用，因为它不清除历史，只更改当前的。它并不完美，但可能你不能做得更好。