前端面试题 - 96. hash 和 history 的区别？

hash和history是Web开发中常用的两个概念，它们都与浏览器URL相关。

Hash（哈希）

URL中以#符号开始的部分被称为哈希部分。在Web开发中，通常使用哈希来实现页面内的导航或锚点定位。当浏览器的哈希发生变化时，页面不会重新加载，而是触发一个hashchange事件。

// 监听 hashchange 事件
window.addEventListener('hashchange', function() {
var currentHash = window.location.hash;

// 根据不同的哈希值执行相应的操作
if (currentHash === '#section1') {
console.log('显示第一部分的内容')

  } else if (currentHash === '#section2') {
console.log('显示第二部分的内容')

  } else {
console.log('其他操作')

  }

});

通过监听此事件，你可以根据哈希的变化来执行相应的操作，例如显示不同的内容或调用特定的函数。哈希可以直接通过JavaScript进行修改，例如window.location.hash = "section2"，URL将变为（此时hashchange事件也会触发）：

https://example.com/page.html#section2
// 输出 显示第二部分的内容

History（历史记录）

历史记录是浏览器跟踪用户访问过的URL的一种机制。通过history对象，你可以在JavaScript中操作浏览器的历史记录。一些常用的方法包括history.pushState()、history.replaceState()和history.back()。这些方法允许你添加、替换和移动浏览器的历史记录，并且不会导致页面的实际刷新。当历史记录发生变化时，浏览器不会重新加载页面，但可以通过popstate事件来捕获这些变化并做出响应。

示例：

// 添加新的历史记录

history.pushState({ page: "page2" }, "Page 2", "page2.html");

// 监听 popstate 事件
window.addEventListener('popstate', function(event) {
var state = event.state;
console.log(state)
// 根据历史记录的变化执行相应的操作
if (state.page === "page1") {
console.log('显示第一页的内容')

    } else if (state.page === "page2") {
console.log('显示第二页的内容')

    } else {
console.log('其他操作')

    }

});

需要注意的是，使用pushState()方法修改历史记录并不会触发popstate事件。只有在用户点击浏览器的前进或后退按钮时，或者通过JavaScript代码调用history.back()、history.forward()或history.go()方法导致历史记录变化时，popstate