前言
这样的需求很常见：点击页码局部更新页面（非整体刷新），并且产生历史管理。局部刷新很容易实现，ajax可以满足我们的需要，但是这并不会产生历史管理，好在html5给我们提供了几个好用的api方便解决这个问题，见下文。
正文
一、API
1、pushState
pushState()有三个参数：一个状态对象、一个标题（现在会被忽略），一个可选的URL地址。
state：与要跳转到的URL对应的状态信息。
title：空字符串（以后可能有用）。
url：要跳转到的URL地址，不能跨域。
作用：将当前URL和history.state加入到history中，并用新的state和URL替换当前。不会造成页面刷新。
2、replaceState
history.replaceState()操作类似于history.pushState()，不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。
3、window.onpopstate
history.go和history.back（包括用户按浏览器历史前进后退按钮）触发，并且页面无刷的时候（由于使用pushState修改了history）会触发popstate事件，事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。通过event.state也可以获取history.state。
二、实现
场景很简单，点击按钮下面的div中出现不同的图片及标题，使用ajax刷新，并且产生历史管理。
<p class="page"> <a href="javascript:;">[ <span>1</span> ]</a> <a href="javascript:;">[ <span>2</span> ]</a> <a href="javascript:;">[ <span>3</span> ]</a> <a href="javascript:;">[ <span>4</span> ]</a> </p> <div> <img /> <p class="title"></p> </div>
核心代码
function setUrl(page){
var url = location.pathname + '"htmlcode">
(function(){
//默认显示第一页
var url = location.pathname + '"htmlcode">
window.addEventListener('popstate',function(){
var page = getPage();
xhr(page);
})
大体的骨架就是这样。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。