HTML5 History API：后退且不允许前进（popState？）

Question

我有一个显示用户信息的webpage。我正在使用ajax 允许用户在不更改网页的情况下修改此数据。

结构真的很简单：

-当用户进入个人资料时，他可以看到他的数据。

-如果用户单击编辑按钮，则会看到一个修改数据的表单。

-如果用户发送表单，则保存数据并再次显示静态数据（更新）。 用户不应使用Back 按钮返回编辑页面。

-如果用户在编辑时点击返回，则再次显示静态数据。

-如果用户在看到静态数据时点击返回，他应该始终返回上一页（不是配置文件）。

我使用HTML5 History API 来处理Back 按钮点击。当用户提交数据时我遇到了问题，因为我希望他回到以前的状态（不是编辑）而无法继续。这就是我现在正在做的事情：

// Edit button clicked.
function edit1(){
    history.pushState("edit", null, "");
    showForm();
}

window.addEventListener("popstate", function(e) {
    var HistoryState = history.state;
    if(HistoryState == null){
       showStaticData();
    }
    else if(HistoryState == "edit1"){
        showForm();
    }
});

$('#myForm').submit(function () {

    ...

    history.back(); // CODE TO DO WHEN THE FORM HAS BEEN SUBMITTED

    return false;
});

如果我使用 history.back() 就像我在上面的代码中所做的那样，除了用户能够单击 Forward 按钮之外，一切正常。如果我使用 replaceState 或 pushState，Forward 按钮将被禁用，但用户可以单击 Back 按钮并停留在同一页面中（我不希望这样）。

有没有办法在不添加新状态的情况下禁用Forward 按钮？ （我不希望用户点击Back并停留在同一页面）

Answer 1

使用虚拟状态

虚拟状态是您明确设置为“不可显示状态”的状态：它们的主要目标是重置前向状态。 我将这些特定的虚拟状态称为“已移除”状态。

我已经在几个 Web 应用程序中使用了这个原理，并且效果很好。

这就像推送状态不会使您的应用程序移动，而是清除历史状态。

history.pushState({removed:true}, 'yourcurrenttitle','yourcurrenturl');

在 popstate 事件中，如果遇到这些已删除的状态，请让您的脚本不启动通常的行为。

---

注意事项

• 任何新的 pushState 在 remove:true history.state 时都应该转换为 replaceState
• 如果您允许您的应用程序删除其他两个状态之间的状态，您将不得不处理跳过这些已删除状态的问题
• 当用户进入移除（虚拟）状态时，您将不得不处理初始（document.ready）情况。在我的情况下，我将用户重定向到“真实”标准状态以避免该问题并且没有充满已删除状态的历史记录。也就是说，如果您尝试处理浏览器的 F5（重新加载页面）功能。