BOM之history

history是JavaScript中BOM上的一个对象，其中存储了浏览器的历史记录

history存储简单过程

浏览器会将一个窗口中访问的网页进行记录，不管我们通过以下哪种方式改变页面，浏览器都会把改变后的网页记录下来，
以便通过浏览器的前进和后退按钮，可以快速切换到已经访问到的页面。
这些方式是：

1. 直接在地址栏输入网页地址
2. 超链接点击跳转到其他页面（必须保证在同一个窗口下跳转）
3. 脚本改变location.href
4. 表单提交跳转（必须保证在同一个页面下跳转）

浏览器使用的一个类似栈的数据结构来存储历史记录。其功能的实现主要是根据栈和一个访问指针来实现的。
首先，历史记录的进栈与出栈是遵从“先进后出”的原则，每次添加新记录都是将该记录放到访问指针相邻的上方位置
（注意：一般情况下访问指针都是位于栈顶处，如果当前访问指针不是位于栈顶（例如用户进行了回退操作），此时我们改变页面，浏览器会将当前指针上边的历史记录全部舍弃，而将新历史记录添加到栈顶，然后访问指针指向它）。

然后，访问指针表示的是当前网址带历史记录栈中的位置。
之后页面的前进和后台只是让访问指针在栈中上移一个位置和下移一个位置而已。
（注意： 当我们打开一个空白标签页，即没有指定具体url时，浏览器也会为该窗口创建history对象，然后将空白页作为历史记录中的第一条记录）

history对象的一些属性和方法

属性：

1. history.length 返回当前窗口历史记录的条数

方法：

1. history.forward() 历史记录中当前页面的上一个页面（就是访问指针上移一个位置）
2. history.back() 历史记录中当前页面的下一个页面（就是访问指针下移一个位置）
3. history.go(n) 历史中前进或后退n个页面（n为正则前进，否则后退）；
   （注意：如果操作超出历史记录范围，操作不会生效）

历史记录管理

我们通过修改hash和hashchange事件来实现历史记录的管理。
用pushState来添加一条历史记录

history.pushState(state, title, url);

 

用replaceState来替换当前历史记录

history.replaceState(state, title, url);

popstate事件：
当历史记录发生改变时触发事件
调用history.pushState()或者history.replaceState()不会触发popstate事件，只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()）

    window.addEventListener('popstate', function(e) {
        // handle
        console.log(e);
    }, false);

 

hashchange事件：
当hash值改变该事件会被触发

window.addEventListener('hashchange', function (e){
        // handle
    })

 

转载于:https://www.cnblogs.com/Walker-lyl/p/7454180.html