转载: https://www.jianshu.com/p/cf63a1fabc86

现实开发中,例如‘商品列表页’跳转‘商品详情页’,返回时,不重新加载刷新页面,并且滚动到原来的位置。
1.首先,先了解一下pushStatereplaceState

参数(params) 功能说明
state 存储JSON字符串,可以用在popstate事件中,可以通过location.state获取
title 现在大多数浏览器不支持或者忽略这个参数,最好用null代替
url 任意有效的URL,用于更新浏览器的地址栏,并不在乎URL是否已经存在地址列表中。更重要的是,它不会重新加载页面
  • 相同点:(1)共同的参数,(2)不会重新加载页面。*
  • 不同点:pushState会在history栈中添加一个新的记录(在开发体验中,会出现怪异的现象,需要返回2次才能真正回到原来的页面);
    replace不会添加新的history栈记录,而是替换当前的url(推荐使用)。

2.开始解决浏览器刷新问题(例如安卓微信浏览器强制刷新)。

  • 还可能应用的场景:例如登录成功后,我们不希望返回的时候还能返回到登录页面。
//1.页面加载完毕时,判断history.state
if (history.state == null) {
//第一次进入页面,需要加载
loadPage()
} else {
//存在状态,获取缓存数据,(当页面使用pushState/replaceState,并且设置参数state,则此时state 不为空,因为页面不会重新加载,所以当返回/刷新时才体现)
}
//2.点击商品,进行跳转前,先设置replaceState,
var state = {
loadNum: loadNum,//上一次加载的个数
pid: pid,//页码
scrollTop: scrollTop,//滚动位置
data: stateData,//json数据
//url: "#",
};
var qs = new Array();//url参数
window.history.replaceState(state, "", "?" + qs.join("&"));//只添加参数时,默认还是当前页面html //或者只判断state,json数据用loacalstroage存储

  

[Web] HTML5新特性history pushState/replaceState解决浏览器刷新缓存的更多相关文章

  1. HTML5新特性 websocket(重点)--多对多聊天室

    一.html5新特性  websocket(重点)--多对多聊天室 HTTP:超文本传输协议 HTTP作用:传输网页中资源(html;css;js;image;video;..) HTTP是浏览器搬运 ...

  2. html5新特性:利用history的pushState等方法来解决使用ajax导致页面后退和前进的问题

    一.背景 使用ajax,可以实现不需要刷新整个页面就可以进行局部页面的更新.这样可以开发交互性很强的富客户端程序,减少网络传输的内容.但长期以来存在一个问题,就是无法利用浏览器本身提供的前进和后退按钮 ...

  3. ajax与HTML5 history pushState/replaceState实例

    一.本文就是个实例展示 三点: 我就TM想找个例子,知道如何个使用,使用语法什么的滚粗 跟搜索引擎搞基 自己备忘 精力总是有限的,昨天一冲动,在上海浦东外环之外订了个90米的房子,要借钱筹首付.贷款和 ...

  4. web全栈架构师[笔记] — 03 html5新特性

    HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...

  5. html5新特性

    这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

  6. html5新特性与用法大全了解一下

    有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...

  7. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  8. HTML5新特性:范围样式

    原文出处:http://blog.csdn.net/hfahe/article/details/7381141        Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...

  9. html5新特性contenteditable 属性更容易实现动态表单

    介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...

随机推荐

  1. ajax往后台传值的一些方式

    $('#del1').click(function () { $.ajax({ url: 'http://localhost:8089/test1', data: {a: 1, b: 2}, type ...

  2. JS 数组克隆方法总结(不可更改原数组)

    ES5 方法总结 1.slice let arr = [2,4,434,43]; let arr1= arr.slice();//let arr1 = arr.slice(0); arr[0] = ' ...

  3. 单元测试框架unitest和自动化测试高级应用

    单元测试框架:为了让单元测试代码更容易维护和编写,遵循一定的规范来编写测试用例. 创建被测类calculator.py   #计算器 class count: def _init_(self,a,b) ...

  4. Spring框架的AOP编程,最通俗的语言解释,易懂易学

    第七章:AOP技术 前言: AOP技术是根据动态代理设计模式进行的技术.动态代理技术分jdk动态代理和cglib动态代理 jdk动态代理特点: (1)继承java.lang.reflect.proxy ...

  5. 网站 & APP 安利

    https://sitoi.cn/posts/51270.html APP 影视类 影视大院 地址:https://www.vfans.fun 描述:没有上架应用商店,需要安装信任企业证书,VIP资源 ...

  6. SQL注入流程图

    http://127.0.0.1/sqli-labs-master/Less-2/index.php? id=1 1 输入单引号   ‘            进行检验是否存在输入 http://12 ...

  7. spring boot flyway 配置说明(摘抄)

    flyway.baseline-description对执行迁移时基准版本的描述. flyway.baseline-on-migrate当迁移时发现目标schema非空,而且带有没有元数据的表时,是否 ...

  8. oracle彻底删除干净

    Oracle数据库的安装这里就不说了,网上应该有很多,但是oracle数据库的卸载却找不到一个比较详细的完整卸载的说明.很多卸载不完全,会有遗留数据,影响后续的安装.所以自己整理一份以前上学的时候学习 ...

  9. vue router 中,children 中 path 为空字符串的路由,是默认打开的路由(包括在 el-tabs 中嵌套路由的情况)

    详见该页面的最后一个代码块:https://router.vuejs.org/zh/guide/essentials/nested-routes.html#%E5%B5%8C%E5%A5%97%E8% ...

  10. IE haslayout 问题引起的常见 bug

    http://www.qianduan.net/comprehensive-haslayout/ 要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底 ...