html5 history新特性精简易懂介绍

由于我刚刚写博客没有多久,写博客的技术还不是很强,在一些方面可能写的不是特别到位,如果你有什么疑问或者有什么没讲,可以在底下留言,我都会一一回复的~~

一 history和ajax无刷新操作

利用HTML5 History API可以实现页面的无刷新跳转,而在以前是没有技术可以达到这点的,Ajax虽然可以实现页面的无刷新操作,但是分页时url地址并不会改变,不利于搜索引擎优化,并且不能使用前进和后退按钮,而在H5 history的新特性里解决了这些问题.

二 HTML4旧版本中的属性和方法

如果不想用浏览器的前进和后退也可以用js来操作.

  history.back() //回退

history.forward() //前进

history.go(n) //前进或者后退n步 正数表示前进 负数表示倒退

history.length //历史记录条数

旧版本里可以进行前进和后退,但这只是在现有的 url上进行前进和后退不能改变url地址,可以用window.location.href改变地址但是页面会被刷新.

三 HTML5 history新特性

HTML5在原有的基础上新加了这些特性

(1)pushState(data,title,url) //追加一条历史记录

data: 用于存储自定义数据,通常设为null

title: 网页标题,基本上没有被支持,一般设为空

url: 以当前域为基础增加一条历史记录,不可跨域设置

(2)replaceState(data,title,url)与pushState基本相同,不同之处在于replaceState()只是替换当前url,不会增加或减少历史记录

应用场景:Single Page Application

pushState()添加历史记录示例

<input type="button" id="btn" value="看地址变没变">
<script>
   // 1、pushState可以往历史记录添加一条记录
   var btn = document.getElementById('btn');
   
   // 可以添加新记录
   btn.onclick = function () {
      // 第一个参数，代表我们自定义一些数据，可传可不传，不传给null
      // 第2个代表示网页的title，所有浏览器基本都忽略
      // 第3个参数表示新追加的历史记录
      history.pushState(null, 'text', '/test.html');
   }     
</script>

现在可以追加历史记录,追加成功后是否有回调呢?,我们可以通过onpostate事件,当前进或后退时触发,通过事件对象ev.state可以读取到存储的数据

监听的对象不是history是要给window哦

<input type="button" id="btn" value="看地址变没变">
<script>
   var btn = document.getElementById('btn');

   btn.onclick = function () {
      // 新增一条记录
      // 我们自定义的数据，只对新增的相对应的历史起作用
      history.pushState({key: '123'}, '标题变没变', '/test.html');
   }

   // 监听历史的变化 只有在点后退/前进时调用
   window.onpopstate = function (state) {
      console.log(state);

   }

</script>

要想对特定的url地址去做特殊处理的情况下,可以给对应的历史记录加数据

连接服务器,实现效果

后退

这样就看到了传递的值的信息