原文为：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. Java语言的概述？-什么是Java？ (附一张Java工程师的学习路线图)

    什么是Java? Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大和简单易用两个特征.Java语言作为静态面向 ...

  2. Linux文件的复制、删除和移动命令

    cp命令  功能:将给出的文件或目录拷贝到另一文件或目录中,就如同DOS下的copy命令一样,功能非常强大.  语法:cp [选项] 源文件或目录 目标文件或目录  说明:该命令把指定的源文件复制到目 ...

  3. Runtime那些事

    Runtime 前言 从字面意思看,就是运行时.但是这个运行时究竟什么意思?可以把它理解成:不是在编译期也不是在链接期,而是在运行时.那究竟在运行期间做了什么呢?按照苹果官方的说法,就是把一些决策(方 ...

  4. TreeMap 源码分析

    简介 TreeMap最早出现在JDK 1.2中,是 Java 集合框架中比较重要一个的实现.TreeMap 底层基于红黑树实现,可保证在log(n)时间复杂度内完成 containsKey.get.p ...

  5. HTTPS、证书与使用Charles抓包

    .p1 { margin: 0.0px 0.0px 0.0px 0.0px; font-size: 14.0px; font-family: "Helvetica Neue", & ...

  6. Android-AnsyncTask异步任务

    同步和异步的概念区别: 同步,必须执行完成某个问题后才能继续执行其他的. 异步,我会去先执行其他问题,你执行完之后返回给我一个结果就可以. android中为什么要引用异步任务呢 android启动的 ...

  7. Linux常见命令（系统命令）

    1.查看主机名hostname 2.修改主机名(重启后无效)hostname hadoop 3.修改主机名(重启后永久生效)vi /etc/sysconfig/network[hostname=had ...

  8. Windows内核中的内存管理

    内存管理的要点 内核内存是在虚拟地址空间的高2GB位置,且由所有进程所共享,进程进行切换时改变的只是进程的用户分区的内存 驱动程序就像一个特殊的DLL,这个DLL被加载到内核的地址空间中,Driver ...

  9. django 项目中遇到的问题（持续更新中）

    问题1:in include 'provide the namespace argument to include() instead 描述:在最外层的urls.py 添加项目的urls后报错,错误显 ...

  10. hive入门（一）、什么是hive

    1.Hive 基本概念 Hive是基于Hadoop的一个 数据仓库工具,可以将结构化的数据文件映射成一张表,并提供类SQL查询功能: Hive是构建在Hadoop 之上的数据仓库: 使用HQL作为查询 ...