原文为：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接口

enum ScrollRestoration { "auto", "manual" }'
interface History {

　　readonly attribute unsigned long length;

　　attribute ScrollRestoration scrollRestoration;

　　readonly attribute any state;

　　void go(optional long delta = );

　　void back();

　　void forward();

　　void pushState(any data, DOMString title, optional DOMString? url = null);

　　void replaceState(any data, DOMString title, optional DOMString? url = null);

};

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 位置的静态页面可能如下所示：

<!DOCTYPE HTML>

<!-- this is https://example.com/line?x=5 -->

<title>Line Game - 5</title>

<p>You are at coordinate 5 on the line.</p>

<p>

<a href="?x=6">Advance to 6</a> or

<a href="?x=4">retreat to 4</a>?

</p>

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

<!DOCTYPE HTML>

<!-- this starts off as https://example.com/line?x=5 -->

<title>Line Game - 5</title>

<p>You are at coordinate <span id="coord">5</span> on the line.</p>

<p>

<a href="?x=6" onclick="go(1); return false;">Advance to 6</a> or

<a href="?x=4" onclick="go(-1); return false;">retreat to 4</a>?

</p>

<script>

var currentPage = 5;//prefilled by server

function go(d) {

    setupPage(currentPage + d);

    history.pushState(currentPage, document.title, '?x=' + currentPage);

}

onpopstate = function(event) {

    setupPage(event.state);

}

function setupPage(page) {

    currentPage = page;

    document.title = 'Line Game - ' + currentPage;

    document.getElementById('coord').textContent = currentPage;

    document.links[0].href = '?x=' + (currentPage + 1);

    document.links[0].textContent = 'Advance to ' + (currentPage + 1);

    document.links[1].href = '?x=' + (currentPage - 1);

    document.links[1].textContent = 'retreat to ' + (currentPage - 1);

}

</script>

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

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

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

<!DOCTYPE HTML>

<TITLE>Line</TITLE>

<SCRIPT>

setInterval(function() {

    document.title = 'Line - ' + new Date();

}, 1000);

var i = 1;

function inc() {

    set(i + 1);

    history.pushState(i, 'Line - ' + i);

}

function set(newI) {

    i = newI;

    document.forms.F.I.value = newI;

}

</SCRIPT>

<BODY ONPOPSTATE="set(event.state)">

<FORM NAME=F>

State: <OUTPUT NAME=I>1</OUTPUT> <INPUT VALUE="Increment" TYPE=BUTTON ONCLICK="inc()">

</FORM>

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

<head>

  <script>

    if ('scrollRestoration' in history)

      history.scrollRestoration = 'manual';

  </script>

</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. git stash的用法

    使用git stash git stash的使用场景是这样的: 当你正在你的分支下进行开发时,这时候你可能需要切换到你的另一个分支去,你可能要pull新的代码下来,但是你又不想添加无用的commit. ...

  2. python multiprocessing.Process

    在使用Kafka-python时自己写的一个bug 我在一个进程的__init__中初始化了一个producer,但是一直不好用 但是在函数里直接new一个就好用了 why? 需要说明的是produc ...

  3. Kettle中忽略错误行继续执行

    在kettle执行的过程中,如果遇到错误,kettle会停止运行.在某些时候,并不希望kettle停止运行,所以就要处理下这些错误行. 例如这两天发现在一个转换中,总数出现一些不规则数据,这些数据一出 ...

  4. JavaScript的DOM编程--11--插入节点

    插入节点: 1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面 var reference = element.insertBefore(newNode,t ...

  5. MySQL视图,触发器,事务,存储过程,函数

    create triggr triafterinsertcmdlog after insert on cmd_log FOR EACH ROW trigger_body .#NEW : 代表新的记录 ...

  6. Python学习_07_错误、异常

    地毯式地过语法终于快要结束了... Python中的常见异常 1.NameError:尝试访问一个未初始化的变量 2. ZeroDivisionError:除数为0 3. SyntaxError:Py ...

  7. windows64 系统下安装Nodejs

    1.nodejs安装: 版本号: node-v8.9.3-x64 检测安装成功:(这个版本已经集成了npm) 2.npm作为一个NodeJS的模块管理,先配置npm的全局模块的存放路径以及cache的 ...

  8. Fiddler的hosts配置使用

    前提:使用fiddler的hosts配置,可以方便的配置自己想要测试环境,不需要每次配置hosts都到windows目录下去修改hosts文件 1.点击Tool->HOSTS,打开hosts的配 ...

  9. Fiddler中设置断点修改返回结果Response

    测试有时会遇到需要测试返回不同的数据前端展示出来会如何?如果去数据库中的数据会比较麻烦.这样我们可以通过fiddler设置断点来修改返回的数据实现测试不同的数据展示. 1.设置断点 (1)点击菜单栏按 ...

  10. 解决ios手机上传竖拍照片旋转90度问题

    html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...