JavaScript History对象详解：API、状态管理与缓存机制

History对象概述

本文深入解析JavaScript中History对象的工作原理，通过具体示例代码展示其各项功能，为开发者的学习与实际工作提供具有参考价值的技术指南。

length属性用于获取历史记录中URL的数量。初始状态下，该值通常为1。需要注意的是，IE10及以上版本的浏览器在初始化时返回值为2，这种浏览器间的兼容性问题导致该属性在实际开发中较少被直接使用。

length属性用于获取历史记录中URL的数量。初始状态下，该值通常为1。需要注意的是，IE10及以上版本的浏览器在初始化时返回值为2，这种浏览器间的兼容性问题导致该属性在实际开发中较少被直接使用。

历史记录跳转方法

浏览器提供了多种页面跳转方法，主要包括go()、back()和forward()，用于在历史记录中前进或后退。

浏览器提供了多种页面跳转方法，主要包括go()、back()和forward()，用于在历史记录中前进或后退。

调用go()、back()或forward()方法时，如果指定的移动位置超出了当前访问历史的边界，浏览器不会抛出错误，而是静默失败，页面保持现状。

在使用历史记录进行页面跳转时，浏览器通常优先从本地缓存中加载页面，而非向服务器重新请求资源。因此，这种操作不会触发页面的onload事件。

HTML5新增状态管理API

HTML5标准在History对象中引入了两个新方法：history.pushState()和history.replaceState()，分别用于在历史记录中添加新记录和修改当前记录。这两个方法通过state属性保存状态对象，并通过popstate事件来监听历史记录的变化。

HTML5标准在History对象中引入了两个新方法：history.pushState()和history.replaceState()，分别用于在历史记录中添加新记录和修改当前记录。这两个方法通过state属性保存状态对象，并通过popstate事件来监听历史记录的变化。

需要注意的是，IE9及以下版本的浏览器不支持上述两个新增方法。

pushState方法详解

【pushState()】

history.pushState()方法用于向浏览器历史记录栈中添加一个新的状态条目。该方法接收三个参数：一个状态对象、一个标题字符串（目前主流浏览器均忽略此参数）以及一个可选的URL地址。

语法格式为：history.pushState(state, title, url);

第一个参数state object是一个JavaScript对象，它与新添加的历史记录相关联。当用户导航至该状态时，会触发popstate事件，事件的state属性将包含该状态对象。若无需保存状态，可传入null。

第二个参数title代表新页面的标题，但当前所有主流浏览器均忽略此值，因此建议直接传入null。

第三个参数URL提供了新历史记录条目的地址。该URL必须与当前页面的URL保持同源，否则pushState()将抛出异常。此参数为可选，若未提供，则默认使用当前文档的URL。

假设当前网页地址为example.com/1.html，通过pushState方法可以向历史记录中添加一条新记录。

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

执行上述操作后，浏览器地址栏会立即显示为example.com/2.html，但页面并不会跳转到2.html，甚至浏览器也不会检查该文件是否存在。它仅仅是将新URL作为历史记录中的最新条目。此时，如果用户访问google.com，然后点击后退按钮，页面URL将显示为2.html，但页面内容仍保持为原来的1.html。再次点击后退按钮，URL显示1.html，内容不变。

综上所述，pushState方法不会导致页面刷新，它仅改变history对象的状态，并更新地址栏显示的URL。

如果pushState设置的url参数包含新的锚点值（即hash），并不会触发hashchange事件，即使新URL与旧URL仅在hash部分存在差异。

若尝试设置一个跨域的URL，浏览器将报错。这一设计旨在防止恶意代码通过更改URL来误导用户，使其误以为身处其他网站。

replaceState方法详解

【replaceState()】

history.replaceState方法的参数与pushState完全一致，主要区别在于：replaceState()用于修改当前历史记录条目，而不是创建新的条目。

假设当前网页地址为example.com/example.html。

history.pushState({page: 1}, 'title 1', '?page=1');
history.pushState({page: 2}, 'title 2', '?page=2');
history.replaceState({page: 3}, 'title 3', '?page=3');
history.back()
// url显示为http://example.com/example.html?page=1
history.back()
// url显示为http://example.com/example.html
history.go(2)
// url显示为http://example.com/example.html?page=3

state属性与popstate事件

【state】

history.state属性用于返回当前页面所绑定的state对象。

history.pushState({page: 1}, 'title 1', '?page=1');
history.state// { page: 1 }

【popstate事件】

只要同一文档的浏览历史（即history对象）发生变化，就会触发popstate事件。

需要特别注意：仅仅调用pushState或replaceState方法并不会触发popstate事件。该事件仅在用户点击浏览器的前进/后退按钮，或通过JavaScript调用back()、forward()、go()方法时才会触发。此外，该事件仅针对同一文档，若历史记录切换导致加载不同文档，该事件也不会触发。

开发者可以为popstate事件指定回调函数。该回调函数的参数是一个event对象，其state属性指向由pushState或replaceState方法为当前URL提供的状态对象（即这两个方法的第一个参数）。

上述代码中的event.state，即为通过pushState和replaceState方法绑定到当前URL的state对象。

该state对象也可以直接通过history对象进行读取。

　　var currentState = history.state;

往返缓存（bfcache）机制

往返缓存（Back-Forward Cache，简称bfcache）是浏览器的一个特性，旨在提升用户使用前进或后退按钮时的页面加载速度。

默认情况下，浏览器会在当前会话（session）中缓存页面。当用户点击“前进”或“后退”按钮时，浏览器会直接从缓存中加载页面，从而加快转换速度。

浏览器具备“往返缓存”(bfcache)特性，旨在通过“后退”和“前进”按钮加速页面切换。该缓存不仅存储页面数据，还保留DOM与JavaScript状态，实质是将完整页面驻留于内存。若页面处于bfcache状态，再次访问时不会触发load事件。

需要注意的是，IE10及以下版本的浏览器不支持bfcache特性。

pageshow事件

【pageshow】

pageshow事件在页面加载时触发，包括首次加载和从缓存加载两种情况。若需指定页面每次加载（无论是否从缓存）时都执行的代码，应将该逻辑放在pageshow事件的监听函数中。

在首次加载时，pageshow事件的触发顺序位于load事件之后。从缓存加载时，由于网页在缓存中的状态通常是load事件监听函数运行后的结果，因此不会再次触发load事件，以避免重复执行。同理，若从缓存加载页面，网页内初始化的JavaScript脚本（如DOMContentLoaded事件的监听函数）也不会再次执行。

虽然pageshow事件的目标是document，但必须将事件处理程序添加到window对象上。

pageshow事件包含一个persisted属性，返回布尔值。页面首次加载或未从缓存加载时，该属性为false；当页面从缓存加载时，该属性为true。

上述示例使用了私有作用域，以防止变量showCount进入全局作用域。如果用户单击浏览器的“刷新”按钮，页面将完全重新加载，showCount的值会被重置为0。

pagehide事件

【pagehide】

与pageshow事件对应的是pagehide事件，该事件在浏览器卸载页面时触发，且早于unload事件。与pageshow类似，pagehide在document上触发，但其事件处理程序必须添加到window对象。

需要注意的是，如果页面指定了onunload事件处理程序，该页面会被自动排除在bfcache之外，即使处理程序为空。这是因为onunload常用于撤销onload中执行的操作，跳过onload再次显示页面可能导致页面状态异常。

pagehide事件的event对象也包含persisted属性，但其用途略有不同。如果页面是从bfcache中加载的，persisted值为true；如果页面在卸载后会被保存在bfcache中，persisted值也会被设置为true。因此，第一次触发pageshow时，persisted值一定是false；而在第一次触发pagehide时，persisted值通常会变为true（除非页面不会被保存在bfcache中）。

window.onpagehide = function(e){
e = e || event;
console.log(e.persisted);
}

使用方法：

1、取消默认的返回操作

function pushHistory(){
 var state = {
    title: "title",
    url: "#"   
  }
 window.history.pushState(state, "title", "#");  
}

pushHistory()

2、history.js用于兼容HTML4，也可以监听pushState与replaceState

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。