BOM之history

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

history存储简单过程

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

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

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

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

history对象的一些属性和方法

属性：

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

方法：

history.forward() 历史记录中当前页面的上一个页面（就是访问指针上移一个位置）
history.back() 历史记录中当前页面的下一个页面（就是访问指针下移一个位置）
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

BOM之history相关推荐

初学JavaScript：BOM（浏览器对象模型）介绍
文章目录 BOM 1.简介 2.BOM的组成 2.1 窗口对象window 2.1.1 window对象特点 2.1.2 window作用域 2.1.3 window对象常见方法第一类:系统对话框 ...
JavaScript Dom 事件 Bom 定时器方法
目录 Dom HTML Dom Node:节点对象,其他5个的父对象修改标签体内容属性 innerHTML 事件 BOM 定时器方法 Navigator:浏览器对象 creen:显示器 ...
从路由原理出发，深入阅读理解react-router 4.0的源码
react-router等前端路由的原理大致相同,可以实现无刷新的条件下切换显示不同的页面.路由的本质就是页面的URL发生改变时,页面的显示结果可以根据URL的变化而变化,但是页面不会刷新.通过前 ...
JavaScript小白基础学习教程
JavaScript学习 javaScript基础概念: 功能: javaScript发展史基本语法与html的结合方式注释数据类型变量运算符 1.一元运算符 2.二元运算符 3.赋值运 ...
React 全家桶入门教程 01
React 全家桶入门教程 01 前面是基础课程(难度小,略过),后面是案例目的巩固react基础知识,查漏补缺(熟悉的部分快进) 学习相关的库的使用 https://study.163.com/ ...
JavaWeb知识点总结
>一: 创建Web项目项目说明: 1.java Resources:java源文件 2.WebContent:网页内容 html.css.js.jsp.资源.配置文件等 HTML:Hyper ...
javaScripty笔记
<JavaScript-笔记> CSS的基本选择器选择器分类语法标签选择器标签名类选择器 .类名 ID选择器 #ID 通用选择器 * CSS的扩展选择器选择元素扩展选择器作用 ...
JavaScript基础第02天笔记
JavaScript基础第02天笔记一.DOM简单学习 1.功能: 控制HTML文档内容 2.代码: 通过ID值获取元素对象 document.getElementById("id值&qu ...
JavaScript大体学习思路
JavaScript学习 javaScript基础概念: 功能: javaScript发展史基本语法与html的结合方式注释数据类型变量运算符 1.一元运算符 2.二元运算符 3.赋值运 ...
笔记34-JavaScript高级笔记
@[TPC] DOM简单学习: 为了满足案例要求功能: 控制html文档的内容获取页面标签(元素)对象 Elemenmt document.getElementById("id值&quo ...

BOM之history

history存储简单过程

history对象的一些属性和方法

历史记录管理

BOM之history相关推荐

最新文章

热门文章