转载: 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. AI金融:利用LSTM预测股票每日最高价

    第一部分:从RNN到LSTM 1.什么是RNN RNN全称循环神经网络(Recurrent Neural Networks),是用来处理序列数据的.在传统的神经网络模型中,从输入层到隐含层再到输出层, ...

  2. MySQL导入数据报错Got a packet bigger than‘max_allowed_packet’bytes错误的解决方法

    由于max_allowed_packet的值设置过小的原因,只需要将max_allowed_packet值设置大一点就OK了.通过终端进入mysql控制台,输入如下命令可以查看max_allowed_ ...

  3. TensorFlow NMT的数据处理过程

    在tensorflow/nmt项目中,训练数据和推断数据的输入使用了新的Dataset API,应该是tensorflow 1.2之后引入的API,方便数据的操作.如果你还在使用老的Queue和Coo ...

  4. 【Axure】原型设计工具的概览与初识

    软件工程综合实践第三次个人作业 作业要求:通过搜索资料和自学,了解原型设计的工具 前言: Axure是一款强大的原型设计工具,具有比较大的用户基础,在此前提下沟通.传输.修改就显得十分方便,并且在细节 ...

  5. docker指定固定IP创建容器

    问题描述: docker默认使用的docker0,子网172.17.0.0/16,不支持指定IP启动容器 问题解决: 新增网段bridge指定别的网段即可 01.docker新增network 新建n ...

  6. Django 之restfromwork 源码分析以及使用之--视图组件

    restframework 源码分析以及使用 mixins 中的五种类方法 from rest_framework import mixins # mixins 中一种有五种类 # 第一种:用户保存数 ...

  7. docker命令小全 this is my note.

    服务器类型:linux =>centos 7.X以上版本 常用命令使用紫色加粗标明 1.安装yum-util(为配置docker安装时使用阿里镜像做准备):yum install -y yum- ...

  8. pandas用法总结

    pandas用法总结 2018年06月07日 10:49:03 一夜了 阅读数 38705更多 分类专栏: 杂项   一.生成数据表 1.首先导入pandas库,一般都会用到numpy库,所以我们先导 ...

  9. iscroll.js的简单使用方法

    参考链接:https://www.cnblogs.com/Renyi-Fan/tag/js%E6%8F%92%E4%BB%B6/default.html?page=2 目录 一.总结 一句话总结:Sc ...

  10. pace.js[转载]

    pace.js监控了什么: pace.js对于加载进度监控了什么呢?通过阅读源码,我们看到整体的进度有四个部分组成:document,elements,eventLag和ajax这四种监视器(Moni ...