js查看浏览器历史记录_js清除浏览器历史记录

js查看浏览器历史记录_js清除浏览器历史记录一、popstate用来做什么的?简而言之就是HTML5新增的用来控制浏览器历史记录的api

js查看浏览器历史记录_js清除浏览器历史记录"

一、popstate用来做什么的?
简而言之就是HTML5新增的用来控制浏览器历史记录的api。

二、过去如何操纵浏览器历史记录?
window.history对象,该对象上包含有length和state的两个值,在它的__proto__上继承有back、forward、go等几个功能函数
在popstate之前,我们可以利用back、forward、go对history进行后退和前进操作。
例如:
history.back(); (后退一步,使用history.go(-1)也可实现后退效果)
弊端:只能操作前进后退,但是无法控制前进后要去哪,history.length都只会维持原来的状态

三、popstate的怎么用?
HTML5的新API扩展了window.history,使历史记录点更加开放了。可以存储当前历史记录点pushState、替换当前历史记录点replaceState、监听历史记录点popstate。

pushState、replaceState两者用法差不多。

使用方法:

history.pushState(data,title,url);
//其中第一个参数data是给state的值;第二个参数title为页面的标题,但当前所有浏览器都忽略这个参数,传个空字符串就好;第三个参数url是你想要去的链接;

replaceState用法类似,例如:history.replaceState(“首页”,””,location.href+ “#news”);

 

两者区别:pushState会改变history.length,而replaceState不改变history.length

 使用场景重现:

1.由于业务逻辑需要:打开我项目页面链接时,如果url中携带了指定参数,初始化进入页面的时候,就显示弹窗。

2.页面中提供了一些其他链接的入口banner

3.这样如果进入页面时携带了参数,点击其中banner时,跳转到其他页面,然后点击宿主的返回按钮,一般是会取之前历史记录里的。这时回到之前页面时,还是会打开弹窗,因为页面链接里还携带着参数

4.解决办法,使用pushState方法,无刷新改变页面url 我只需要这样做:

      let lcthref=location.href.replace(/openMyPrize=true/g,"")
      console.log(lcthref)
      window.history.pushState("","",lcthref)

就可以解决了。

今天的文章js查看浏览器历史记录_js清除浏览器历史记录分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/77582.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注