微信内置浏览器在返回上一页面，且上一页面包含AJAX代码时，页面就会被强制刷新，极度影响用户体验。而我们想要的效果是：返回上一页面时，页面还停留在原来的状态，AJAX获取到的数据还在，滚动条也在原来的位置。

BINGO~

通过HTML5的history API + 缓存可以做到这一点。

执行原理：

1.0、通过history API的 history.pushState或 history.replaceState 保存AJAX状态；

2.0、同时将AJAX获取到的数据缓存起来（可以考虑使用H5的localStorage或sessionstorage）；

3.0、当返回到这个页面时，先获取窗口的history.state，如果不为空，表示保存的有状态，我们要做的就是恢复到这个状态；

4.0、读取缓存数据并加载。如果涉及到分页，且是滚动加载的形式，需要将当前页设置为history.state中的页数。

使用技术点介绍：

history API：

HTML5 history API只包括2个方法：history.pushState()和history.replaceState()，以及1个事件：window.onpopstate。

①history.pushState()

它的完全体是 history.pushState(stateObject, title, url)，包括三个参数。

第1个参数是状态对象，它可以理解为一个拿来存储自定义数据的元素。它和同时作为参数的url会关联在一起。

第2个参数是标题，是一个字符串，目前各类浏览器都会忽略它（以后才有可能启用，用作页面标题），所以设置成什么都没关系。目前建议设置为空字符串。

第3个参数是URL地址，一般会是简单的?page=2这样的参数风格的相对路径，它会自动以当前URL为基准。需要注意的是，本参数URL需要和当前页面URL同源，否则会抛出错误。

调用pushState()方法将新生成一条历史记录，方便用浏览器的“后退”和“前进”来导航（“后退”可是相当常用的按钮）。另外，从URL的同源策略可以看出，HTML5 history API的出发点是很明确的，就是让无跳转的单站点也可以将它的各个状态保存为浏览器的多条历史记录。当通过历史记录重新加载站点时，站点可以直接加载到对应的状态。

②history.replaceState()

它和history.pushState()方法基本相同，区别只有一点，history.replaceState()不会新生成历史记录，而是将当前历史记录替换掉。

③window.onpopstate

push的对立就是pop，可以猜到这个事件是在浏览器取出历史记录并加载时触发的。但实际上，它的条件是比较苛刻的，几乎只有点击浏览器的“前进”、“后退”这些导航按钮，或者是由JavaScript调用的history.back()等导航方法，且切换前后的两条历史记录都属于同一个网页文档，才会触发本事件。

上面的“同一个网页文档”请理解为JavaScript环境的document是同一个，而不是指基础URL（去掉各类参数的）相同。也就是说，只要有重新加载发生（无论是跳转到一个新站点还是继续在本站点），JavaScript全局环境发生了变化，popstate事件都不会触发。

popstate事件是设计出来和前面的2个方法搭配使用的。一般只有在通过前面2个方法设置了同一站点的多条历史记录，并在其之间导航（前进或后退）时，才会触发这个事件。同时，前面2个方法所设置的状态对象（第1个参数），也会在这个时候通过事件的event.state返还回来。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# 微信  # 浏览器  # 刷新  # Adnroid 微信内置浏览器清除缓存  # 使用微信内置浏览器点击下拉框出现页面乱跳转现象（iphone）  # 该怎么办  # 微信支付如何实现内置浏览器的H5页面支付  # 微信内置浏览器私有接口WeixinJSBridge介绍  # Javascript限制网页只能在微信内置浏览器中访问  # 如何判断微信内置浏览器(通过User Agent实现)  # 微信内置浏览器图片查看器的代码实例  # 历史记录  # 加载  # 才会  # 上一  # 设置为  # 多条  # 的是  # 是一个  # 就会  # 文档  # 是在  # 也会  # 在这个  # 还在  # 上一页  # 是由  # 是指  # 也在  # 并在  # 而不 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 大连网站制作公司哪家好一点,大连买房网站哪个好？  C++时间戳转换成日期时间的步骤和示例代码  深圳网站制作公司好吗,在深圳找工作哪个网站最好啊？  Java解压缩zip - 解压缩多个文件或文件夹实例  Laravel如何理解并使用服务容器（Service Container）_Laravel依赖注入与容器绑定说明  千库网官网入口推荐 千库网设计创意平台入口  Laravel怎么实现支付功能_Laravel集成支付宝微信支付  Laravel如何使用Gate和Policy进行权限控制_Laravel权限判定与策略规则配置  装修招标网站设计制作流程,装修招标流程？  Laravel安装步骤详细教程_Laravel环境搭建指南  如何快速配置高效服务器建站软件？  Laravel如何使用Guzzle调用外部接口_Laravel发起HTTP请求与JSON数据解析【详解】  北京企业网站设计制作公司,北京铁路集团官方网站？  如何挑选优质建站一级代理提升网站排名？  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗？  Laravel如何实现文件上传和存储？（本地与S3配置）  google浏览器怎么清理缓存_谷歌浏览器清除缓存加速详细步骤  Laravel如何记录日志_Laravel Logging系统配置与自定义日志通道  Laravel distinct去重查询_Laravel Eloquent去重方法  如何使用 Go 正则表达式精准提取括号内首个纯字母标识符（忽略数字与嵌套）  android nfc常用标签读取总结  谷歌浏览器如何更改浏览器主题 Google Chrome主题设置教程  Python企业级消息系统教程_KafkaRabbitMQ高并发应用  laravel怎么使用数据库工厂（Factory）生成带有关联模型的数据_laravel Factory生成关联数据方法  网站页面设计需要考虑到这些问题  如何在Tomcat中配置并部署网站项目？  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？  javascript中对象的定义、使用以及对象和原型链操作小结  进行网站优化必须要坚持的四大原则  Laravel如何将应用部署到生产服务器_Laravel生产环境部署流程  Laravel如何使用缓存系统提升性能_Laravel缓存驱动和应用优化方案  使用豆包 AI 辅助进行简单网页 HTML 结构设计  如何在 Telegram Web View（iOS）中防止键盘遮挡底部输入框  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  html5怎么画眼睛_HT5用Canvas或SVG画眼球瞳孔加JS控制动态【绘制】  Laravel如何实现API速率限制？（Rate Limiting教程）  如何用腾讯建站主机快速创建免费网站？  HTML透明颜色代码怎么让下拉菜单透明_下拉菜单透明背景指南【技巧】  如何挑选高效建站主机与优质域名？  Win11怎样安装网易有道词典_Win11安装词典教程【步骤】  高防服务器租用如何选择配置与防御等级？  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  如何在 Python 中将列表项按字母顺序编号（a.、b.、c. …）  如何在阿里云完成域名注册与建站？  Win11怎么关闭专注助手 Win11关闭免打扰模式设置【操作】  免费视频制作网站,更新又快又好的免费电影网站？  如何在Windows虚拟主机上快速搭建网站？  Laravel Debugbar怎么安装_Laravel调试工具栏配置指南  宙斯浏览器文件分类查看教程 快速筛选视频文档与图片方法  如何快速生成可下载的建站源码工具？