[Web] HTML5新特性history pushState/replaceState解决浏览器刷新缓存
转载: https://www.jianshu.com/p/cf63a1fabc86
现实开发中,例如‘商品列表页’跳转‘商品详情页’,返回时,不重新加载刷新页面,并且滚动到原来的位置。
1.首先,先了解一下pushState、replaceState。
参数(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解决浏览器刷新缓存的更多相关文章
- HTML5新特性 websocket(重点)--多对多聊天室
一.html5新特性 websocket(重点)--多对多聊天室 HTTP:超文本传输协议 HTTP作用:传输网页中资源(html;css;js;image;video;..) HTTP是浏览器搬运 ...
- html5新特性:利用history的pushState等方法来解决使用ajax导致页面后退和前进的问题
一.背景 使用ajax,可以实现不需要刷新整个页面就可以进行局部页面的更新.这样可以开发交互性很强的富客户端程序,减少网络传输的内容.但长期以来存在一个问题,就是无法利用浏览器本身提供的前进和后退按钮 ...
- ajax与HTML5 history pushState/replaceState实例
一.本文就是个实例展示 三点: 我就TM想找个例子,知道如何个使用,使用语法什么的滚粗 跟搜索引擎搞基 自己备忘 精力总是有限的,昨天一冲动,在上海浦东外环之外订了个90米的房子,要借钱筹首付.贷款和 ...
- web全栈架构师[笔记] — 03 html5新特性
HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...
- html5新特性
这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...
- html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...
- HTML5新特性之CSS+HTML5实例
1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...
- HTML5新特性:范围样式
原文出处:http://blog.csdn.net/hfahe/article/details/7381141 Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...
- html5新特性contenteditable 属性更容易实现动态表单
介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...
随机推荐
- ajax往后台传值的一些方式
$('#del1').click(function () { $.ajax({ url: 'http://localhost:8089/test1', data: {a: 1, b: 2}, type ...
- JS 数组克隆方法总结(不可更改原数组)
ES5 方法总结 1.slice let arr = [2,4,434,43]; let arr1= arr.slice();//let arr1 = arr.slice(0); arr[0] = ' ...
- 单元测试框架unitest和自动化测试高级应用
单元测试框架:为了让单元测试代码更容易维护和编写,遵循一定的规范来编写测试用例. 创建被测类calculator.py #计算器 class count: def _init_(self,a,b) ...
- Spring框架的AOP编程,最通俗的语言解释,易懂易学
第七章:AOP技术 前言: AOP技术是根据动态代理设计模式进行的技术.动态代理技术分jdk动态代理和cglib动态代理 jdk动态代理特点: (1)继承java.lang.reflect.proxy ...
- 网站 & APP 安利
https://sitoi.cn/posts/51270.html APP 影视类 影视大院 地址:https://www.vfans.fun 描述:没有上架应用商店,需要安装信任企业证书,VIP资源 ...
- SQL注入流程图
http://127.0.0.1/sqli-labs-master/Less-2/index.php? id=1 1 输入单引号 ‘ 进行检验是否存在输入 http://12 ...
- spring boot flyway 配置说明(摘抄)
flyway.baseline-description对执行迁移时基准版本的描述. flyway.baseline-on-migrate当迁移时发现目标schema非空,而且带有没有元数据的表时,是否 ...
- oracle彻底删除干净
Oracle数据库的安装这里就不说了,网上应该有很多,但是oracle数据库的卸载却找不到一个比较详细的完整卸载的说明.很多卸载不完全,会有遗留数据,影响后续的安装.所以自己整理一份以前上学的时候学习 ...
- vue router 中,children 中 path 为空字符串的路由,是默认打开的路由(包括在 el-tabs 中嵌套路由的情况)
详见该页面的最后一个代码块:https://router.vuejs.org/zh/guide/essentials/nested-routes.html#%E5%B5%8C%E5%A5%97%E8% ...
- IE haslayout 问题引起的常见 bug
http://www.qianduan.net/comprehensive-haslayout/ 要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底 ...