history 对象

对浏览器的会话历史的访问

back()，forward()，go(n)，length

pushState

history.pushState(state, title [, url])

• state 一个对象，16 MiB

• title 由于历史原因，该参数存在且不能忽略；固定传空

• url 不会在调用 pushState() 之后尝试加载此 URL，但可能会稍后尝试加载 URL

  • 相对路径是当前 URL 进行解析
  • 新网址必须与当前网址相同 origin
  • 未指定此参数，则将其设置为文档的当前 URL

window.onpopstate = function (e) {
  console.log(e);
};
let stateObj = {
  foo: "bar",
};
let clickButton = document.getElementById("clickButton");
clickButton.onclick = function () {
  history.pushState(stateObj, "page 2", "jump.html");
  // history.replaceState(stateObj, "page 2", "jump.html");
};

pushState 和 window.location = "#foo"比较

哈希

• 只有在修改哈希时，设置 window.location 才能是同一个 document
• 要把所有相关数据编码为短字符串

pushState

• 新的 URL 可以是与当前 URL 同源的任意 URL
• 你可以将任意数据和新的历史记录项相关联
• 绝对不会触发 hashchange 事件

改变 referrer

referrer 是标识创建 XMLHttpRequest 对象时 this 所代表的 window 对象中 document 的 URL

history.replaceState(state, title [, url])

更新当前的 state 对象或者 URL 来响应用户的的动作

全局浏览记录依然会创建记录

window.onpopstate

• 跳转到当前页面的时候触发

• 当前活动的历史记录项是被 pushState/replaceState 创建的

  state包含传递过来的数据

获取当前状态

• 页面首次加载也有可能拿到 state 数据（没有体现）
• history.state