[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 ...
随机推荐
- AI金融:利用LSTM预测股票每日最高价
第一部分:从RNN到LSTM 1.什么是RNN RNN全称循环神经网络(Recurrent Neural Networks),是用来处理序列数据的.在传统的神经网络模型中,从输入层到隐含层再到输出层, ...
- MySQL导入数据报错Got a packet bigger than‘max_allowed_packet’bytes错误的解决方法
由于max_allowed_packet的值设置过小的原因,只需要将max_allowed_packet值设置大一点就OK了.通过终端进入mysql控制台,输入如下命令可以查看max_allowed_ ...
- TensorFlow NMT的数据处理过程
在tensorflow/nmt项目中,训练数据和推断数据的输入使用了新的Dataset API,应该是tensorflow 1.2之后引入的API,方便数据的操作.如果你还在使用老的Queue和Coo ...
- 【Axure】原型设计工具的概览与初识
软件工程综合实践第三次个人作业 作业要求:通过搜索资料和自学,了解原型设计的工具 前言: Axure是一款强大的原型设计工具,具有比较大的用户基础,在此前提下沟通.传输.修改就显得十分方便,并且在细节 ...
- docker指定固定IP创建容器
问题描述: docker默认使用的docker0,子网172.17.0.0/16,不支持指定IP启动容器 问题解决: 新增网段bridge指定别的网段即可 01.docker新增network 新建n ...
- Django 之restfromwork 源码分析以及使用之--视图组件
restframework 源码分析以及使用 mixins 中的五种类方法 from rest_framework import mixins # mixins 中一种有五种类 # 第一种:用户保存数 ...
- docker命令小全 this is my note.
服务器类型:linux =>centos 7.X以上版本 常用命令使用紫色加粗标明 1.安装yum-util(为配置docker安装时使用阿里镜像做准备):yum install -y yum- ...
- pandas用法总结
pandas用法总结 2018年06月07日 10:49:03 一夜了 阅读数 38705更多 分类专栏: 杂项 一.生成数据表 1.首先导入pandas库,一般都会用到numpy库,所以我们先导 ...
- iscroll.js的简单使用方法
参考链接:https://www.cnblogs.com/Renyi-Fan/tag/js%E6%8F%92%E4%BB%B6/default.html?page=2 目录 一.总结 一句话总结:Sc ...
- pace.js[转载]
pace.js监控了什么: pace.js对于加载进度监控了什么呢?通过阅读源码,我们看到整体的进度有四个部分组成:document,elements,eventLag和ajax这四种监视器(Moni ...