利用JavaScript如何查看浏览器的历史记录

　　介绍

这期内容当中小编将会给大家带来有关利用JavaScript如何查看浏览器的历史记录,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

历史是窗口对象中的一个JavaScript对象,它包含了关于浏览器会话历史的详细信息。你所访问过的URL列表将被像堆栈一样存储起来。浏览器上的返回和前进按钮使用的就是历史的信息。

历史对象包含长度属性,它包含了会话历史记录栈中URL的数量,例如,如果用户在浏览器中打开一个标签页,历史记录的长度将是1(新的标签页也是一个网页),然后用户输入一个网址foo.com并点击回车,现在历史记录对象的长度将是2,用户转到其他页面bar.com,历史记录对象的长度将就是3了。

<强>后退和前进方法

你可以使用历史对象的后退和前进方法来浏览网页。例如,如果你想转到上一个页面,那么可以使用:

history.back ()

同样的,如果你想转到下一页,你可以使用:

history.forward ()

<强>去方法

如果您想向前或向后移动n个页面,那么您可以使用去方法:

history.go(2)//倒退2页 　　history.go(2)//前进2页

所以history.go(1)和history.forward()效果是相同的,history.go(1)和history.go(1)效果是相同的.history。去方法的默认值为0,如果不传任何数字,则当前页面会被刷新。

window.history.go (0) 　　window.history.go ()

<强> PushState

你也可以使用PushState和replaceState方法改变页面的URL.pushState会改变页面的URL,并将改变后的URL添加到历史对象的URL栈顶部。语法如下:

的历史。pushState(国家、标题、url)

参数状态是状态数据,它将被存储在历史。状态变量中。参数标题是标题文本,不过它对大多数浏览器都没有效果,所以一般传空字符串(“;”)或传空就可以了。

让我们在控制台中尝试一下,在执行之前,比如打开baidu.com,然后在控制台输入:

history.pushState (& # 39; 123 & # 39; & # 39; & # 39;, & # 39; new-url& # 39;)

执行上面的代码后,它会将页面地址栏中改的URL为baidu.com/new-url,同时将URL添加到历史对象中。此时检查历史。长度会增加1 .

除此之外,我们还可以为每个URL存储状态(当前页面的数据)。在上面的例子中,你会把“123”;存储在历史。状态变量中,当你返回到这个页面时,你就可以历史。国家再次拿到到这些数据,例如:

history.pushState(& # 39;临时数据1 & # 39;,& # 39;标题# 39;,& # 39;new-url-1& # 39;) 　　历史。州//傲偈笔?“; 　　history.pushState(& # 39;临时数据2 & # 39;,& # 39;标题# 39;,& # 39;new-url-2& # 39;) 　　历史。州//傲偈笔?“; 　　history.back () 　　历史。州//傲偈笔?“

每当通过pushState返回到之前被添加到历史记录的页面时,浏览器就会触发一个名为popstate的事件,并将状态数据作为参数。比如在浏览器打开一个新标签页,进入某个网页(比如baidu.com),先监听popstate事件:

window.addEventListener (& # 39; popstate& # 39;, (e)=比;console.log (e)

然后调用pushState:

的历史。pushState ({name: & # 39; test1 # 39;},& # 39;标题# 39;& # 39;test1 # 39;)

然后按下返回按钮,popstate事件就会被触发,你可以在监听事件中查看打印出来的数据。在打印的数据中,可以找到历史。状态的值。

注册pushState中的url可以是完整的url,但必须和当前页面是相同的域名,否则会抛出跨域异常。

浏览器还有一个replaceState API,和pushState的区别是,它只改变了url,不会将url添加到历史记录,这里就不再累述了。

<强>实例演示

现在我们做一个小的网页应用,这个应用将实现如下功能:

    <李>显示用户列表 <李>可以通过下拉框筛选“先生”和“女士” <李>当下列列表发生变化时,url也会相应的变化李

我们先不关心历史API,先实现功能。下面是html关键代码:

& lt;选择id=皊electbox"比; 　　& lt;选项值=https://www.yisu.com/zixun/"都">全部 　　<选项值="男">先生 　　<选项值=" femalt ">女士> 　　
    　　<李性别="男">张先生李 　　<李性别="女">李女士李 　　<李性别="女">王女士李 　　

下面是javascript关键代码:

 
利用JavaScript如何查看浏览器的历史记录