Window.history保存用户在一个会话期间的站点訪问记录,用户每次訪问一个新的URL即创建一个新的历史记录。

history.go()、history.back()、history.forward()

history.back()和history.forward()分别表示向后一页和向前一页。

history.go(num)表示向前或向后翻多少页。num为正数表示向前翻。为负数则向后翻。

History.back()等价于history.go(-1),history.forward()等价于history.go(1)。

运行这三个中的任一方法,触发浏览器的popstate事件,假设仅仅是hash部分发生变化。还可能同一时候触发hashchange事件。

改动站点路径并创建新的历史记录

history.pushState(statedata, title, url);

參数URL必须和当前URL同源。否则会报错。仅仅能够改动URL中路径、井号之后的片段(即hash)或者URL中问号(?)之后的查询区段。

每运行一次pushState()用新的URL替换掉当前URL。即地址栏URL会变,window.location.href也会变,同一时候创建一个新的历史记录。但运行pushState()永远不触发hashchange事件。

參数statedata能够是不论什么被序列化的数据。这些数据被保存在用户硬盘上。但状态数据有限制大小,比方Firefox仅仅同意640KB字符。

使用pushState()的优点:仅仅改URL的hash部分,window.location使用的是同一个document。

兼容性问题

pushState直到IE10才被支持,在早版本号的IE中仅仅能通过改动window.location=”#foo”完毕。但这样会触发hashchange事件。

改动站点路径但不创建新的历史记录

看标题就知道了,replaceState()和pushState()的唯一差别是不创建新的历史记录。而是直接改动当前历史记录。

history.replaceState(stateData, title, url);

历史记录状态

有两种方式能够訪问历史訪问记录的状态信息,history.state返回历史訪问堆栈最顶端的记录的状态;而PopStateEvent.state值有在PopStateEvent事件触发的时候在事件监听中才干訪问。

State的默认值在不同浏览器可能不同。比方IE10下面默认是undefiend,但IE10和IE11默认是null。

HTML5推荐使用nul为默认值。

事件

popstate事件

调用history.back()、history.forward()、history.go()等方法。会触发popstate事件,单纯调用pushState()或replaceState()不触发popstate事件。

訪问事件的state属性可获取当初pushState()或replaceState()设置的状态数据。

最新文章

  1. git分支管理一
  2. c++游戏服务器编程学习笔记(一)TCP/IP
  3. hive函数参考手册
  4. Android UI系列-----EditText和AutoCompleteTextView
  5. [转载]ExtJs4 笔记(3) Ext.Ajax 对ajax的支持
  6. JS学习笔记(一) 概述
  7. 第三方Push服务:Urban Airship
  8. eclipse 下生成jar包
  9. select XXX into 和 Insert into XXX select
  10. js标点符号全局匹配
  11. AndroidのUI设计研究(一)——自定义ProgressBar
  12. css考核点整理(十二)-能描述下你在项目中都用到了哪些符合逐渐增强和优雅降级的理念的技巧吗
  13. pwnable.kr brainfuck之write up
  14. Spark组件
  15. 深入探究Lua的GC算法(下)-《Lua设计与实现》
  16. Go的Get命令兼容公司Gitlab仓库的HTTP协议
  17. 第69节:Java中数据库的多表操作
  18. MybatisGenerator生成的mapper 少了识别主键的方法 byPrimaryKey()
  19. JS代码把JSON字符串转换为对象,计算对象的长度并把它转换为数字类型,把转换的值相加减
  20. sql左外连接、右外连接、group by、distinct(区别)、intersect(交叉)、通配符、having

热门文章

  1. 【php】 PHP 支持 9 种原始数据类型
  2. jq相关操作
  3. 剑指Offer(书):反转链表
  4. bs4--官文--遍历文档树
  5. PowerShell-第2章 管道
  6. 【04】Math图解
  7. 六丶人生苦短,我用python【第六篇】
  8. Python 日期与时间
  9. PHP读取xlsx Excel 文件
  10. 【LeetCode】Two Sum(两数之和)