history.pushState

history.pushState

html5定义了一个想浏览器历史追加状态的API,主要以此来实现浏览器前进后退和正常的一模一样.

它总共有三个参数:

  1. state 它是一个对象一般储存字符串[我出现过存HTML对象的,报错了~~,只能存字符串]
  2. title 它主要用来代表新页面的标题但被多数浏览器忽略,一般设置为null
  3. 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);
   }
}
1 分享 二维码
分类:代码笔记
标签:
还没有评论


在此输入评论..
0/100