原文为：https://w3c.github.io/html/browsers.html#session-history-and-navigation

一、浏览上下文的会话历史记录

浏览上下文中的文档（Document）序列构成了它的会话历史。每一个浏览上下文，包含嵌套的浏览上下文，拥有各自独特的会话历史。浏览上下文的会话历史表示为一个平坦的会话历史入口的列表。会话历史列表中的每个条目，至少包含一个URL，可能还有一个序列化的状态（state object），一个标题，一个文档对象，表单数据，一个滚动位置信息和其他相关信息。

        注意：会话历史列表中的每个条目第一次被创建时，拥有一个文档。然而，当文档未激活时，它可能用来描述一个空的资源。如果用户代理发现自己不得不重新激活文档，URL和其他在会话历史列表条目的数据被用来传递给新的文档，并有该文档去替换原来的文档。

        注意：会话历史列表条目中的标题不需要与当前文档的标题有任何关系。一个会话历史列表条目的标题是为了解释那一时刻文档的状态，以让用户能够导航文档的历史。

当用户（或脚本）在页面之间导航时，没有相关序列化状态的URL将被添加到会话历史记录中。

每个在浏览上下文的回话历史中的Document对象与一个唯一的History对象相关联，它们必须以相同的基础会话历史为模板。

Window接口的history属性必须返回根据Window对象最新的Document来实现的History接口的对象。

序列化状态是表示用户界面状态的对象的序列化 (通过 StructuredSerializeForStorage)。有时, 我们非正式地将“状态对象”表示为作者提供的用户界面状态，或者是通过反序列化 (通过 StructuredDeserialize) 已被序列化的状态所创建的对象。

页面可以将序列化状态添加到会话历史记录中。然后，当用户 (或脚本) 返回到历史记录中时，这些将再被反序列化并返回到脚本中，从而使作者即使在单页应用中也可以使用 “导航” 功能。

注意：使用序列化状态主要有两个目的：首先，在 URL 关联的状态中存储之前已解析的描述，以便在简单的情况下，作者不需要再进行解析 (尽管您仍然需要解析需要处理的用户传递的URL，所以它只是一个小的优化)，第二，作者可以存储的状态，但不会存储在 URL中，它只适用于当前的Document实例，如果一个新的文档打开，它需要重新建立。

后面的一个例子是跟踪精确的坐标，以在特定位置使用动画弹出 div，如果用户返回，可以在相同的位置使用动画。或者，它可用一个指针指向数据缓存，其中存储通过URL中的信息从服务器上获取的数据，以便在前进和后退时不需要再次从服务器中获取信息。

在任何时候，会话历史记录中的条目都是当前条目。这是表示浏览上下文活动文档的条目。至于哪个条目是当前条目是由本规范中定义的算法 (例如，在会话历史遍历期间) 更改的。

二、History接口

  1. enum ScrollRestoration { "auto", "manual" }'
  1. interface History {
  2.  
  3. 　　readonly attribute unsigned long length;
  4.  
  5. 　　attribute ScrollRestoration scrollRestoration;
  6.  
  7. 　　readonly attribute any state;
  8.  
  9. 　　void go(optional long delta = );
  10.  
  11. 　　void back();
  12.  
  13. 　　void forward();
  14.  
  15. 　　void pushState(any data, DOMString title, optional DOMString? url = null);
  16.  
  17. 　　void replaceState(any data, DOMString title, optional DOMString? url = null);
  18.  
  19. };

window.history.length

　　返回会话历史列表中条目数量

window.history.state

　　返回当前的状态对象

window.history.go([delta])

　　在会话历史集中向后或向前步进指定的量
　　如果delta为0则重新加载当前页面
　　如果delta超过了允许的范围，什么也不做

window.history.back()

　　在会话历史集中向后步进1
　　如果没有前一页，则什么也不做

window.history.forward()

　　在会话历史集中向前步进1
　　如果没有下一页，则什么也不做

window.history.pushState(data, title [,url])

　　将给定的数据，按指定的标题及可选的URL压入会话历史中

window.history.replaceState(data, title [,url])

　　更新会话历史中的当前条目，使之持有给定的数据、标题和可选的URL

历史记录集是指共享History对象的顶级浏览上下文的那些活动Document对象所持有的浏览上下文中的会话历史的集合，并从中清除每个会话历史的当前条目，但保留历史记录集的当前条目。

历史记录集的当前条目是指最后一个变为会话历史中的当前条目的条目。

历史记录集中的条目是按其加入到各自会话历史的时间顺序排列的。（由于这些浏览上下文在概念上共享一个事件循环，它们的会话历史中添加项的顺序始终是明确的）每一项都有一个索引，最早的一项索引为0，后续项的索引为依次递增的整型（1、2、3，等）。

History接口的Length属性必须返回历史记录集中历史项的数量。

无法通过脚本访问真正的历史项。

History接口的State属性必须返回用户代码最后一次为其赋的值。对于一个初始的History接口，其值必须为null。

当调用go(delat)方法时，如果没有传递参数或者参数值为0，则用户代理必须按调用location.reload()的方式进行。其他情况下，用户代理必须以方法参数指定的值为差值遍历历史。

当调用back()方法时，用户代理必须以-1为差值遍历历史。

当调用forward()方法时，用户代理必须以1为差值遍历历史。

例子：考虑一个游戏，用户可以沿着一条直线导航，这样用户总是在某一坐标上。这样用户就可以将对应于某个特定坐标的页面加入书签，以便以后返回。

在这样的游戏中实现 x=5 位置的静态页面可能如下所示：

  1. <!DOCTYPE HTML>
  2. <!-- this is https://example.com/line?x=5 -->
  3. <title>Line Game - 5</title>
  4. <p>You are at coordinate 5 on the line.</p>
  5. <p>
  6. <a href="?x=6">Advance to 6</a> or
  7. <a href="?x=4">retreat to 4</a>?
  8. </p>

这样的系统的问题是，用户每次点击，整个页面必须重新加载。下面是使用脚本的另一种方法：

  1. <!DOCTYPE HTML>
  2. <!-- this starts off as https://example.com/line?x=5 -->
  3. <title>Line Game - 5</title>
  4. <p>You are at coordinate <span id="coord">5</span> on the line.</p>
  5. <p>
  6. <a href="?x=6" onclick="go(1); return false;">Advance to 6</a> or
  7. <a href="?x=4" onclick="go(-1); return false;">retreat to 4</a>?
  8. </p>
  9. <script>
  10. var currentPage = 5;//prefilled by server
  11. function go(d) {
  12.     setupPage(currentPage + d);
  13.     history.pushState(currentPage, document.title, '?x=' + currentPage);
  14. }
  15. onpopstate = function(event) {
  16.     setupPage(event.state);
  17. }
  18. function setupPage(page) {
  19.     currentPage = page;
  20.     document.title = 'Line Game - ' + currentPage;
  21.     document.getElementById('coord').textContent = currentPage;
  22.     document.links[0].href = '?x=' + (currentPage + 1);
  23.     document.links[0].textContent = 'Advance to ' + (currentPage + 1);
  24.     document.links[1].href = '?x=' + (currentPage - 1);
  25.     document.links[1].textContent = 'retreat to ' + (currentPage - 1);
  26. }
  27. </script>

在不支持脚本的系统中，它仍然像前面的示例一样工作。但是，支持脚本的用户现在可以更快地进行导航，因为在相同的体验下不需要请求网络。此外，书签和导航的会话历史仍然可用。

在上面的示例中，pushState () 方法的data参数与将发送到服务器的信息相同，但采用更方便的形式，因此脚本不必在每次用户导航时解析 URL。

例子：应用程序可能不使用会话历史条目de 标题作为该文档<title>元素的值。例如，这里有一个简单的页面，它显示title元素。显然，当向后导航到以前的状态时，用户不会及时返回，因此将时间放在会话历史标题中是不合适的。

  1. <!DOCTYPE HTML>
  2. <TITLE>Line</TITLE>
  3. <SCRIPT>
  4. setInterval(function() {
  5.     document.title = 'Line - ' + new Date();
  6. }, 1000);
  7. var i = 1;
  8. function inc() {
  9.     set(i + 1);
  10.     history.pushState(i, 'Line - ' + i);
  11. }
  12. function set(newI) {
  13.     i = newI;
  14.     document.forms.F.I.value = newI;
  15. }
  16. </SCRIPT>
  17. <BODY ONPOPSTATE="set(event.state)">
  18. <FORM NAME=F>
  19. State: <OUTPUT NAME=I>1</OUTPUT> <INPUT VALUE="Increment" TYPE=BUTTON ONCLICK="inc()">
  20. </FORM>

例子：大多数应用程序都希望对其所有历史记录项使用相同的滚动还原模式值。为了实现这一点，他们应该尽快设置 scrollRestoration 属性 (例如，在文档的 head 元素中的第一个脚本元素中)，以确保添加到历史会话中的任何条目都获得所需的滚动恢复模式。

  1. <head>
  2.   <script>
  3.     if ('scrollRestoration' in history)
  4.       history.scrollRestoration = 'manual';
  5.   </script>
  6. </head>

[翻译]HTML5 - 会话历史和导航的更多相关文章

  1. 深入学习 History 对象管理浏览器会话历史

    History对象允许我们操作浏览器会话历史,即加载当前页面的标签页窗口或frame窗口的访问历史.之前有同学咨询我如何实现拦截用户跳转页面并强制用户返回首页后重新请求页面,于是有了本篇博客的主题,本 ...

  2. Oracle活动会话历史(ASH)及报告解读

    对于数据库运行期间的各种状态的实时监控以及相关性能数据捕获对于解决性能问题,提高整体业务系统运行效率是至关重要的.在Oracle数据库中,实时捕获相关性能数据是通过ASH工具来实现的.ASH通过每秒钟 ...

  3. HTML5设计网页熔岩灯导航（navigation bar）插件 已经加上完整源代码

    导航栏(navigation bar): 1.指位于页眉区域的,在页眉横幅图片上边或下边的一排水平导航按钮,它起着链接博客的各个页面的作用. 2.网页设计中不可缺少的部分,它是指通过一定的技术手段,为 ...

  4. sessionStorage 前端HTML5会话管理

    sessionStorage 是在HTML5中新增的一个会话存储对象,sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据.. 提示: 如果你想 ...

  5. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之目录导航

    ASP.NET MVC with Entity Framework and CSS是2016年出版的一本比较新的.关于ASP.NET MVC.EF以及CSS技术的图书,我将尝试着翻译本书以供日后查阅. ...

  6. html4,xhtml,html5发展历史

    SGML SGML 是一种很强大但很复杂的标记语言,HTML.XML 就是从中衍生出来的.SGML 的例子如下:<QUOTE TYPE="example"> typic ...

  7. html5 - history 历史管理

    参考文章: w3c     :  http://www.w3.org/html/ig/zh/wiki/HTML5/history 张鑫旭  : http://www.zhangxinxu.com/wo ...

  8. html5 替换 历史 记录

    history.replaceState({url:"/admin/index"},null,"/admin/index"); url 是 需要替换的路径

  9. html5 带声音的导航

    代码实例: <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3. ...

随机推荐

  1. 用Go校验下载文件之SHA256

    用GO校验下载文件之SHA256 原来对计算机和网络使用安全这块不够重视,用了N多年盗版的操作系统和办公软件,为了破解使用过各种激活软件,也安装使用过很多别人破解过的软件:网络下载的文件从不校验.慢慢 ...

  2. JavaUtil_06_DES加解密工具

    一.示例 CommonUtil.java package com.ray.test.des; import java.io.ByteArrayOutputStream; import java.io. ...

  3. 前端安全之XSS攻击及防御

    xss攻击是什么 ? XSS攻击类似于SQL注入攻击,攻击之前,我们先找到一个存在XSS漏洞的网站,XSS漏洞分为两种,一种是DOM Based XSS漏洞,另一种是Stored XSS漏洞.理论上, ...

  4. angular4.0微信oAuth第三方认证的正确方式

    当我们的项目运行在微信端时,用到oAuth第三方认证.问题来了,在ng4中微信认证应该放在哪里呢? 开始项目的时候,我将oAuth认证放在了每个页面模版中,发现返回历史页的时候,需要返回两次. 这个问 ...

  5. Java 非线程安全的HashMap如何在多线程中使用

    Java 非线程安全的HashMap如何在多线程中使用 HashMap 是非线程安全的.在多线程条件下,容易导致死循环,具体表现为CPU使用率100%.因此多线程环境下保证 HashMap 的线程安全 ...

  6. 【转】Python 爬虫的工具列表【预】

    这个列表包含与网页抓取和数据处理的Python库 网络 通用 urllib -网络库(stdlib). requests -网络库. grab – 网络库(基于pycurl). pycurl – 网络 ...

  7. linux之 NFS服务器与客户端的安装与配置

    今天实验室需要搭建NAS,我负责的是NFS的安装与配置,现将整理的文档分享一下: 参考一:Linux下rpm 安装包方式安装 http://linux.chinaunix.net/techdoc/be ...

  8. js 拼接table 的方法

    <html> <head> <title>test page</title> <script type='text/javascript'> ...

  9. MYSQL:alter语句中change和modify的区别

    您可以使用CHANGE old_col_namecolumn_definition子句对列进行重命名.重命名时,需给定旧的和新的列名称和列当前的类型.例如:要把一个INTEGER列的名称从a变更到b, ...

  10. struts2中配置文件的调用顺序

    1.default.properties 该文件保存在 struts2-core-2.3.7.jar 中 org.apache.struts2中 2.struts-default.xml 该文件保存在 ...