[Web] HTML5新特性history pushState/replaceState解决浏览器刷新缓存
2024-10-20 00:24:47
转载: 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存储
最新文章
- [LeetCode] Largest Divisible Subset 最大可整除的子集合
- Andriod学习笔记2:“Your content must have a ListView whose id attribute is 'android.R.id.list'”问题的解决办法
- Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock'解决
- Beta版本——第一次冲刺博客
- MySQL 5.7贴心参数之binlog_row_image
- android 一个简单的服务例子
- lsof 解决无法删除文件夹问题
- log4net简单配置内容
- sprint个人总结+读书博客
- 【读书笔记】iOS-GCD-多线程编程
- B - Kefa and Company
- 156. Binary Tree Upside Down
- POJ_1064_Cable_master_(二分,假定一个解并判断是否可行)
- bootstrap系列整理
- iOS8中添加的extensions总结(四)——Action扩展
- CCNA实验(2) -- Static Route
- idea 给maven项目添加依赖(二)
- SpringBoot报错:The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zone
- ELK 安装与基本配置(一)
- Leetcode - 309. Best Time to Buy and Sell Stock with Cooldown