微信内置浏览器在返回上一页面，且上一页面包含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 】

相关推荐： 香港服务器租用费用高吗？如何避免常见误区？  网站制作价目表怎么做,珍爱网婚介费用多少？  Laravel事件和监听器如何实现_Laravel Events & Listeners解耦应用的实战教程  详解免费开源的DotNet二维码操作组件ThoughtWorks.QRCode（.NET组件介绍之四）  Linux安全能力提升路径_长期防护思维说明【指导】  laravel怎么为应用开启和关闭维护模式_laravel应用维护模式开启与关闭方法  Laravel怎么使用Session存储数据_Laravel会话管理与自定义驱动配置【详解】  EditPlus中的正则表达式 实战(2)  Python自然语言搜索引擎项目教程_倒排索引查询优化案例  如何用搬瓦工VPS快速搭建个人网站？  Laravel怎么实现API接口鉴权_Laravel Sanctum令牌生成与请求验证【教程】  利用 Google AI 进行 YouTube 视频 SEO 描述优化  晋江文学城电脑版官网 晋江文学城网页版直接进入  PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)  香港服务器建站指南：外贸独立站搭建与跨境电商配置流程  在线制作视频的网站有哪些,电脑如何制作视频短片？  Python制作简易注册登录系统  python中快速进行多个字符替换的方法小结  Python函数文档自动校验_规范解析【教程】  Python自动化办公教程_ExcelWordPDF批量处理案例  Laravel如何使用Facades（门面）及其工作原理_Laravel门面模式与底层机制  米侠浏览器网页图片不显示怎么办 米侠图片加载修复  Laravel如何实现API版本控制_Laravel版本化API设计方案  北京的网站制作公司有哪些,哪个视频网站最好？  javascript中数组（Array)对象和字符串（String)对象的常用方法总结  Linux系统运维自动化项目教程_Ansible批量管理实战  uc浏览器二维码扫描入口_uc浏览器扫码功能使用地址  Laravel如何使用Eloquent ORM进行数据库操作？（CRUD示例）  HTML5空格和margin有啥区别_空格与外边距的使用场景【说明】  JavaScript实现Fly Bird小游戏  JavaScript如何实现音频处理_Web Audio API如何工作？  智能起名网站制作软件有哪些,制作logo的软件？  Laravel PHP版本要求一览_Laravel各版本环境要求对照  无锡营销型网站制作公司,无锡网选车牌流程？  HTML5空格在Angular项目里怎么处理_Angular中空格的渲染问题【详解】  如何在IIS中新建站点并解决端口绑定冲突？  大连网站制作公司哪家好一点,大连买房网站哪个好？  如何彻底卸载建站之星软件？  Win11怎么开启自动HDR画质_Windows11显示设置HDR选项  详解Huffman编码算法之Java实现  高防服务器租用首荐平台，企业级优惠套餐快速部署  Laravel用户密码怎么加密_Laravel Hash门面使用教程  Laravel怎么使用Blade模板引擎_Laravel模板继承与Component组件复用【手册】  html如何与html链接_实现多个HTML页面互相链接【互相】  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？  Laravel如何使用Eloquent进行子查询  如何挑选优质建站一级代理提升网站排名？  西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站？  如何使用 jQuery 正确渲染 Instagram 风格的标签列表  如何正确下载安装西数主机建站助手？