HTML history.pushState 和 location.hash 之间的区别

在本文中，我们将介绍 HTML 中 history.pushState 和 location.hash 两个方法之间的区别。这两个方法主要用于在浏览器历史记录中添加新的状态和改变浏览器的 URL，但它们在使用方式和效果上有一些不同之处。

阅读更多：HTML 教程

history.pushState

history.pushState 是 HTML5 中新增的方法，用于修改浏览器历史记录中的状态，并且不会刷新页面。它接受三个参数：状态对象、标题和 URL。

下面是一个使用 history.pushState 方法的示例：

const stateObj = { page: "home" };
const pageTitle = "Home";
const url = "/home";
history.pushState(stateObj, pageTitle, url);

在上面的例子中，我们创建了一个状态对象 stateObj，指定页面的标题为 “Home”，将 URL 设置为 “/home”。然后使用 history.pushState 方法将这个状态添加到浏览器的历史记录中。

使用 history.pushState 可以在不刷新页面的情况下修改 URL，并且可以使用浏览器的前进和后退按钮进行导航。但需要注意的是，只有修改 URL，并没有真正加载新的页面内容，所以在使用 history.pushState 修改 URL 时，需要额外的代码来根据 URL 的变化加载对应的内容。

location.hash

location.hash 是 HTML 中用于在 URL 中添加片段标识符（fragment identifier）的方法。它是以 “#” 符号开头的 URL 片段，用来标识文档内的特定位置。

下面是一个使用 location.hash 的示例：

location.hash = "#section1";

在上面的例子中，我们把 location.hash 的值设置为 “#section1″，这样浏览器的 URL 就会变成 “http://example.com/page.html#section1″，并且会自动滚动到文档中 id 为 “section1” 的元素。

使用 location.hash 可以方便地将页面滚动到指定的位置，并且这种方式对浏览器历史记录没有影响。但需要注意的是，每次修改 location.hash 的值，浏览器不会向服务器发送请求，也不会刷新页面。

区别对比

接下来我们来对比一下 history.pushState 和 location.hash 的不同之处：
1. URL 格式：history.pushState 修改 URL 的格式可以自定义，可以修改域名、路径等各个部分；而 location.hash 修改的仅为 URL 中的片段标识符部分。
2. 刷新页面：使用 history.pushState 修改 URL 后，浏览器不会刷新页面；而修改 location.hash 不会刷新页面，但会触发 hashchange 事件。
3. 传递参数：使用 history.pushState 可以通过状态对象传递参数，在浏览器前进和后退时可以获取到这些参数；而 location.hash 只能传递片段标识符，无法传递其他参数。

综上所述，history.pushState 和 location.hash 在功能和使用方式上有一些区别。如果需要修改整个 URL，并且希望页面不刷新，可以使用 history.pushState；如果只需要修改片段标识符，并且希望页面定位到指定位置，可以使用 location.hash。

总结

在本文中，我们介绍了 HTML 中 history.pushState 和 location.hash 两个方法的区别。history.pushState 用于修改浏览器历史记录中的状态，并且不会刷新页面，可以自定义 URL 的各个部分；而 location.hash 用于修改 URL 的片段标识符部分，并且可以方便地将页面滚动到指定位置。根据具体的需求，选择合适的方法来修改浏览器的 URL。