如何在复杂的HTML5和JavaScript应用程序中修改浏览器历史记录

您不喜欢活泼的标题吗？

考虑一个复杂的应用程序，例如webmail客户端。 本质上，它是在单个HTML页面上运行的复杂JavaScript程序。 用户加载URL，并显示电子邮件列表。 他们单击标题，然后使用Ajax检索并显示电子邮件内容。 他们现在想返回到电子邮件列表； 他们在做什么？…

…单击浏览器的后退按钮。

砰。 该应用程序关闭并返回到他们在访问该应用程序之前正在查看的页面。 或者，如果它是一个新的浏览器选项卡，则后退按钮被禁用并且无法单击。

所以我们有一个问题。 我们的Webmail客户端不支持大多数用户理解的一种浏览器控件。 有解决方案。 其中一些涉及更改URL中的井号（#name），以便可以保留状态。 它并不完美，但可以在所有浏览器中使用。

幸运的是，此问题已通过HTML5 history.pushState和history.replaceState方法与window.onpopstate事件一起解决。

尝试一下history.pushState（）演示页面…

该技术非常简单：

1. 当状态改变时，例如用户打开电子邮件，history.pushState（）将传递状态信息并执行。 这将启用后退按钮，但重要的是不会将用户从页面上移开。
2. 您可以根据需要多次运行history.pushState（），或使用history.replaceState（）修改当前状态。
3. 当用户单击后退（或前进）时，将触发window.onpopstate事件。 处理函数可以检索关联的状态并显示适当的屏幕。

不足之处？ 在v10到来之前，请不要与IE兼容。 如果需要支持IE9及以下版本，则可以使用很多垫片，包括History.js和HTML5-History-API 。

让我们写一些代码。 假设您刚刚显示了Ajax请求的结果：

// Ajax request
...
// display result
...

// modify history
history.pushState(obj, title, url);

哪里：

• obj是任何JavaScript对象。 您可以使用它来保留状态信息，例如{“ view”：“ EMAILCONTENT”，“ item”：123};
• title是可选标题
• url是可选URL。 该URL可以是任何东西-浏览器不会跳转到该页面，但可以在用户重新加载页面或重新启动浏览器。 在大多数情况下，您需要使用参数或哈希名称，例如？view = EMAILCONTENT＆item = 123;。 您的应用程序可以在启动时分析这些值，然后返回同一位置。

history.replaceState（）具有相同的参数，仅在要用新状态替换当前状态时使用。

现在，您需要一个处理函数，该函数将在浏览器的后退或单击下一步按钮后触发窗口popstate事件时运行：

window.addEventListener("popstate", function(e) {

	// URL location
	var location = document.location;

	// state
	var state = e.state;
	
	// return to last state
	if (state.view == "EMAILCONTENT") {
		...
	}

});

可以使用document.location确定URL的位置（ document.location.search和document.location.hash返回参数和哈希名称）。

从事件对象的state属性获取由pushState（）或replaceState（）设置的历史状态对象。 您可以使用该信息显示适当的屏幕。

尝试一下history.pushState（）演示页面…

单击history.pushState按钮几次，然后单击以查看日志中发生的情况。

很有用。 您是否在Web应用程序中遇到了上一步和下一个按钮的问题？

From: https://www.sitepoint.com/javascript-history-pushstate/