JS学习笔记 location.href和location.replace的大致区别

今天学校的外聘老师告诉我们,公司开发过程中,因为新手的一些误操作造成了许多问题,

举个例子,在项目中 比如要购买一件商品 ,并且有一个这个商品的优惠券,而使用这张优惠券需要取请求 一个第三方的地址,

中间会有一次跳转,因为使用了location.href 后,按流程操作是没问题的,但是如果用户点击返回,则无法跳回原本的提交订单的页面,会一直进行重复请求,造成程序出错,

所以,必须替换成location.replace 来跳转,保证在进入第三方后 不会存入window.history 用户点击返回就可以绕过第三方地址,直接返回最初的页面。

还提到了,在ios的设备上当用户点击返回时,为了提高性能网页呈现的是快照形式,并不会更新内容,所以,在返回网页时需要用到localtion.reload() 来刷新页面 ,重新请求页面内容

<body οnpageshοw="location.reload()">

用法区别

location.href="http://www.baidu.com"

location.replace("http://www.baidu.com")

location.href 会写入 浏览器的历史 window.history 对象中 location.replace则不会

实践

这里我写了两个按钮,都是跳转到百度网站

先点击href

发现 跳转后 浏览器的返回键时可以点击的

再点击replace

跳转后 浏览器的返回键是无法点击的,因为,replace其实是将当前的url替换了,而非跳转,并不会保存记录

关于这点区别,先记录一下

溜了溜了

经验分享 程序员 微信小程序 职场和发展