文章目錄
  1. 1. 旧方法
  2. 2. 新方法
  3. 3. 事件监听

旧方法

旧版本中我们用 BOM 的 history 对象来管理历史记录

history.back(); 回退
history.forward(); 前进
history.go(n);  前进/后退n步,正值前进,负值后退
history.length; 历史记录条数(同一个站点下的历史记录的长度)

新方法

  • pushState(data, title, url)

追加一条历史记录:
在当前页面之前插入一个一模一样的页面并将当前页面的 url 更改为方法中设置的 url

data 用于存储自定义数据,通常设为null
title 网页标题,基本上没有被浏览器支持,一般设为空
url 以当前域为基础增加一条历史记录,不可跨域设置

例:

<script>
    // 1、pushState可以往历史记录添加一条记录
    var btn = document.getElementById('btn');       
    btn.onclick = function () {
        // history对象的新方法pushState
        // 可以追加一条历史记录
        // 追加完成后,当前页面并未刷新
        history.pushState(null, 'title', '/text.html');
        // 1、代表是传递的数据,一般可能传null
        // 2、代表网页标题,但是浏览器不支持
        // 3、追加的历史记录
    }       
</script>
  • replaceState(data, title, url)

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

事件监听

onpopstate;

当前进或后退时则触发,通过事件对象ev.state可以读取到存储的数据,监听是要给window。
例:

<script>
    var btn = document.getElementById('btn');
    btn.onclick = function () {
        // 追加历史记录
        history.pushState({key: 123}, 'title', '/text.html');
    }
    // 监听历史的变化
    window.onpopstate = function (ev) {
        console.log(ev.state);
        console.log(ev);
    }
</script>
文章目錄
  1. 1. 旧方法
  2. 2. 新方法
  3. 3. 事件监听