HTML5的history API，保存ajax数据

最新推荐文章于 2024-02-07 22:37:11 发布

原创最新推荐文章于 2024-02-07 22:37:11 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #api

H5 专栏收录该内容

1 篇文章

订阅专栏

本文介绍HTML5中History API的应用技巧，通过示例代码演示如何使用pushState和replaceState来记录页面状态，并利用onpopstate事件实现浏览器前进后退功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在学习HTML5，看到一些教程讲到H5的history API，个人觉得蛮有用的，就顺带记录下来。

有些页面上的数据是通过ajax请求后台返回，然后填充到页面上。在点击一个连接后，如果此时按浏览器的返回键，是不能获取到刚才完整的界面（因为ajax填充的数据没有被history记录下来）。在H5中，提供了几个新的history的API函数，本文主要讲以下三个函数。

(1.)window.history.pushState(data,title[,url]) //向当前history添加数据，数据的标识用url来区分，在添加数据的时候浏览器的ur参数会发生改变，但不发送请求

(2.)window.history.replaceState(data,title[,url]) //替换history数据

(3.)window.onpopstate = function(event){ //通过history前进后退，触发onpopstate事件
//event.state;//返回
}

为了方便理解，贴上代码：

前台view界面：

<html>
<body>
<nav>
<button id="home" class="active">Home</button >
<button id="center">Center</button >
</nav>
<br>
<div>
<p id="p1"></p>
</div>
</body>
</html>
<script src="jquery-1.7.2.js"></script>
<script>
$(function(){
$.get("ajax.php?request=home",function(data){
//alert(data);
$("#p1").html(data);

});

$("#home").click(function(){
$.get("ajax.php?request=home",function(data){
$("#p1").html(data);
window.history.pushState({"data":data},"home","?home");
});
});

$("#center").click(function(){
$.get("ajax.php?request=center",function(data){
$("#p1").html(data);
window.history.pushState({"data":data},"center","?center");
});
});

window.onpopstate = function(e){
if(e.state){
var data = e.state.data;
document.querySelector("#p1").innerHTML = data;
}
};
});
</script>

后台ajax.php：

<?php
function request()
{
$request = $_GET['request'];
if($request=="home")
{
echo "home";
}
if($request=="center")
{
echo "center";
}
return ;
}
request();
?>

代码比较简单，前台就是点击Home和Center两个按钮时，通过ajax从后台获取数据，从而div里面的值发生改变。在发送aja请求获取数据之后，调用pushState函数，向history添加数据，然后再点击前进（后退）按钮时触发window.onpopstate事件，如果浏览器有记录的话就把浏览器里保存的数据填充到 id为p1的段落里面。

这样每次ajax请求的值就保存下来，按前进（后退键也能看到数据了）。

新手初稿，比较粗糙。嘿嘿。