history对象包含用户访问过的URL,属于window对象的一部分,传统的使用中,它拥有length属性(浏览器历史列表URL数目)

及back()、forward()、go()方法。

而新的H5则赋予了其更多的新特性:

往返缓存

默认情况下,浏览器会缓存当前会话页面,这样当下一个页面点击后退按钮,或前一个页面点击前进按钮,浏览器便会从缓存中提取并加载此页面,这个特性被称为“往返缓存”。

备注: 此缓存会保留页面数据、DOM和js状态,实际上是将整个页面完好无缺地保留

------------沉默分割线-----------------------------------------------------------------------------------------------------------------------

pushState(state, title, url) 

往历史记录栈中添加记录

支持度: IE10+

state: 一个js对象,主要用于在popstate事件中作为参数被获取

title: 新页面的标题,部分浏览器(比如firefox)忽略此参数,因此一般为null

url: 新历史记录的地址,可为页面地址也可为一个锚点值,新url必须与当前url处于同一个域,否则将抛出异常,此参数若没有特别标注,会被设为当前文档url

实例:

假定当前网址是example.com/1.html,使用pushState方法在浏览记录(history对象)中添加一个新记录

var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');

浏览器地址栏将立即变成example.com/2.html,但并不会跳转到2.html,甚至不会检查2.html是否存在,也不会再popstate事件中获取,因为:这个方法仅仅是添加了一条最新记录,不会触发页面刷新

备注:

1.将url设为锚点值时不会触发hashchange

2.如果设置不同域名地址,会报错,这样做的目的是:防止用户以为它们是同一个网站,若没有此限制,将很容易进行XSS、CSRF等攻击方式

------------华丽分割线--------------------------------------------------------------------------------------------------------------------------

replaceState(state, title, url)

支持度: IE10+

参数与pushState一致,但其功能是改变当前的历史记录而不是添加新的记录。

同样不会触发popstate

------------璀璨分割线--------------------------------------------------------------------------------------------------------------------------

history.state

支持度: IE10+

返回当前历史记录的state

--------------曼妙分割线---------------------------------------------------------------------------------------------------------------------

popstate事件

支持度: IE10+

语法: window.onpopstate= function(event){

  console.log(event.state) //当前历史记录的state对象

}//注意大小写

触发条件: 点击前进后退按钮、调用back()、forward()、go()

个人思考: 对于pushState、replaceState无法触发它,可以从语义上理解,pop有弹出、提取出的意味,是从历史记录栈中提取出来,而pushState、replaceState分别是压入栈和改变元素,自然不会触发。

history新增方法的更多相关文章

  1. 谈谈HTML5中的history.pushSate方法,弥补ajax导致浏览器前进后退无效的问题

    移动端为了减少页面请求,有时候需要通过单页面做成多页面的效果,最近有这么个需求,表单填完后执行第一步,然后执行第二步,第二步执行完后再执行第三步,每一步都要保留之前的数据.这种情况用单页面实现再合适不 ...

  2. HTML5的新增方法

    json的新增方法: parse()   将JSON转换为字符串:必须是严格的JSON格式: 用法 : var s = {"name":"name"}; JSO ...

  3. Html5使用history对象history.pushState()和history.replaceState()方法添加和修改浏览历史记录

    根据网上参考自己做个笔记:参考网址:http://javascript.ruanyifeng.com/bom/history.html history.pushState() HTML5为histor ...

  4. JS window对象 History 对象 history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能。语法: window.history.[属性|方法]

    History 对象 history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能. 注意:从窗口被打开的那一刻开始记录,每个浏览器窗口.每个标签页乃至每个框架,都 ...

  5. ES6 - 基础学习(4): 模板字符串和字符串新增方法

    模板字符串 模板字符串:我理解为将字符串格式化.模板化,将字符串加强处理,此处的模板有动词的意思. 字符串模板基本格式: `xxxxxx`(前后都用反引号[tab键上面按键]引起来).除了作为普通字符 ...

  6. tp5 中 model 的新增方法

    //默认主键为自动识别,如果需要指定,可以设置属性: namespace app\index\model; use think\Model; class User extends Model { pr ...

  7. ES6对象的扩展及新增方法

    1.属性的简洁表示法 ES6允许直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. const foo = 'bar'; const baz = {foo}; baz//{foo:'bar ...

  8. Java 8之Map新增方法<转>

    在Java 8中的Map.Entry接口中增加了comparingByKey, comparingByValue方法,它们都返回Comparator<Map.Entry<K,V>&g ...

  9. 【ES6 】ES6 字符串扩展及新增方法

    模板字符串 传统写法 var str = 'There are <b>' + basket.count + '</b> ' + 'items in your basket, ' ...

随机推荐

  1. 51Nod 1299 监狱逃离

    这其实是一道树形DP的神仙题. 然后开始推推推,1 hour later样例都过不了 然后仔细一看题目,貌似像一个最小割模型,然后5min想了想建图: 首先拆点,将每个点拆成进和出两个,然后连边,边权 ...

  2. “论 ofo 是如何影响今日头条发展的”

    近段时间, ofo 小黄车押金难退的消息频频曝出.尽管 OFO 已经宣布押金只能在线上退还,但是线上退押金也难,因此很多的用户还是选择到 ofo 北京总部“要个说法”.记者昨天在现场发现,位于北京中关 ...

  3. spring boot 在不同环境下读取不同配置文件的一种方式

    在工程中,通常有根据不同的环境读取不同配置文件的需求,对于spring boot 来说,默认读取的是application.yml 或者 application.properties.为了区分不同的环 ...

  4. Linux配置mail客户端发送邮件

    1. 概述 在Linux操作系统环境中,可以配置邮件服务器,也可以配置邮箱客户端.本篇主要是配置邮件客户端,这对于发送服务器一些系统信息十分有必要. 2. mail客户端安装 2.1 安装mailx ...

  5. mac下查看和设置环境变量

    1.查看环境变量 命令    env 2.修改环境变量 命令    cd ~ && ls -a && sudo vim .bashrc 编辑输入要添加的环境变量 3.s ...

  6. 12.26daily_scrum

    尽管最近是众多大作业集中爆发deadline的紧要关头,队员们依旧热情高涨,投入良多,纷纷为产品发布出谋划策. 具体工作: 小组成员 今日任务 工作时间 李睿琦 软件调试过程总结 2 左少辉 滑锁密码 ...

  7. 剑指offer:数组中重复的数字

    题目描述: 在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次.请找出数组中任意一个重复的数字. 例如,如果输入长度 ...

  8. [2017BUAA软工]个人项目

    软工个人项目 一.Github项目地址 https://github.com/Lydia-yang/2017BUAA-SoftwareEngineering 二.解题思路 在刚开始拿到题目的时候,关于 ...

  9. Atlas & mysql-proxy

    Atlas https://github.com/Qihoo360/Atlas https://github.com/Qihoo360/Atlas/wiki/Installing-Atlas Atla ...

  10. VM虚拟机—JVM内存

    JVM在运行时将数据划分为了5个区域来存储,这5个区域图示如下: 其中方法区和堆对是所有线程共享的内存区域:而java栈.本地方法栈和程序员计数器是运行时线程私有的内存区域. 首先我们熟悉一下一个 J ...