JavaScript 中 historyPushState 的使用记录

#history.pushState

html5 定义了一个想浏览器历史追加状态的 API，主要以此来实现浏览器前进后退和正常的一模一样。它总共有三个参数：

state 它是一个对象一般储存字符串 [我出现过存 HTML 对象的，报错了~~,只能存字符串]
title 它主要用来代表新页面的标题但被多数浏览器忽略，一般设置为 null
url 它代表新页面的 URL，它会更新浏览器的 url 相对地址，但是不会验证是否为真实的，它只能设置相同的域名的 URL，是不能将啥大网站的 URL 设置到你这的。

一般将数据存储到 state 中，比如 ajax 获取到的页面。它只有 640 kb 大小的容量，所以如果想储存超过这个大小的数据可以存储在 sessionStorage 或者 localStorage 中，这俩有 5 mb 的容量

#使用 history.pushState 和 history.replaceState

这两个的功能分别是一个追加一个替换，就像盘子样一个忘上叠一个更换而浏览器就会显示最上面的盘子他们的参数，设置方法都一样

var state = {
    url:"http://???",
    title:null,
    data:String
}
history.pushState(state,state.title,state.url)

#使用 popstate 监测浏览器前进后退

window.onpopstate = function (val){
     var state = val.state;
     if(state!==null)console.log(state);
}

读取 state 里面的数据然后替换 dom 就可以了

#其他

第一次追加记录时会导致回退时页面无变化，state 没有值，所以第一次应该使用 replaceState 来替换

//写入历史记录
function writeHistory(state) {
   if(history.state===null){
       window.history.replaceState(state,state.title, state.url);
   }else {
       window.history.pushState(state,state.title, state.url);
   }
}