API 使用历史

HTML5 History API 绝对是现代网站的必经之路。它完成了手头的任务，同时还提供了额外的功能。我们可以使用history.pushState()或history.replaceState()修改浏览器中的 URL，具体取决于我们的需要：

// Current URL:  nextURL = ';;const nextTitle = 'My new page title';const nextState = { additionalInformation: 'Updated the URL with JS' };// This will create a new entry in the browser's history, without reloadingwindow.history.pushState(nextState, nextTitle, nextURL);// This will replace the current entry in the browser's history, without reloadingwindow.history.replaceState(nextState, nextTitle, nextURL);

两种方法的参数是相同的，允许我们传递一个自定义的可序列化state对象作为第一个参数，一个自定义的title（尽管大多数浏览器会忽略这个参数）和URL我们想在浏览器的历史记录中添加/替换的。请记住，History API 仅允许同源 URL，因此我们无法导航到完全不同的网站。

使用位置 API

较旧的 Location API 并不是完成这项工作的最佳工具。它会重新加载页面，但仍允许我们修改当前 URL，并且在使用旧版浏览器时可能很有用。我们可以使用 location.assign() 或 location.replace() 修改Window.location.hrefURL ：

// 当前URL:  nextURL = ';;// 这将在浏览器的历史记录中创建一个新条目，然后重新加载window.location.href = nextURL;// 这将替换浏览器历史记录中的当前条目，然后重新加载window.location.assign(nextURL);// 这将替换浏览器历史记录中的当前条目，然后重新加载window.location.replace(nextURL);

如我们所见，所有三个选项都会导致页面重新加载，这可能是不可取的。与 History API 不同，我们只能设置 URL，没有任何附加参数。最后，Location API 不会限制我们使用同源 URL，如果我们不小心，可能会导致安全问题。