怎么用backurl跳转_一张设计图让我对history.back()和href跳转有了新的认知

摘要：由于之前没有怎么在意history.back()，所以潜意识里也没把他当回事儿。直到我遇到了一个需求，当地址栏中的链接出现#号时，浏览器的回退结果可能并不是我们想要的。此时若使用href强行跳转到指定页面，在此页面中执行history.back()时就会进入一个死循环的状态......

一、有这么一个需求

这周在开发公司项目时遇到一个比较有意思的需求，功能是这样的：在商品详情页中点击运费时跳转到地址选择页，当选择完成后回跳到商品详情页并显示所选城市的运费。效果图如下：商品详情页点配送跳选择地址页面.png

如实说，一开始我的内心是拒绝的！当前页选择地址不香吗？非要跳转新页面。页面一跳转，又是一堆新的问题......

二、开发中存在的问题

2.1、页面跳转后数据如何存储？

由于是两个页面，页面间跳转必然会导致数据丢失。比如：选择的商品规格、选择的城市怎么回填等。为了解决数据丢失的问题，必然加大了工作量！

常用的数据存储的几种方式方式优点缺点放url中1、无需插件；

2、兼容性强取值麻烦

cookie存储方便1、需要自己封装或引入第三方库；

2、浏览器有大小限制；

localStorage1、无需引用插件或封装；

2、主流浏览器都支持自行搜索

sessionStorage自行搜索自行搜索

发请求这还有优点？耗费资源

2.2、选择地址页中的锚点如何实现？

这个锚点是啥意思呢？就是点击右侧的字母时，页面滚动到对应的城市位置。

锚点功能方式优点缺点#id无需js1、页面滚动不流畅；

2、暂时保密，后面揭晓

js页面滚动顺滑些需要写一些js代码实现功能

三、踩坑过程

艺灵我先是使用了cookie + #id的方案，但是写着写着就发现问题了！

3.1、选择地址页的后退不能直接回退到商品详情页？？？

复现流程：

1、首页点商品；

2、此时会直接跳转到商品详情页，在商品详情页点运费；

3、此时会直接跳转到选择地址页；

4、重点来了，如果在这个页面不是直接选择地址而是点击右侧的锚点的话，此时再回退就会回退到上一步操作，仍然是当前页面。如图：地址选择面使用a标签的锚点时回退出现问题.gif(注意看地址栏的链接)

3.2、记录上一页，回退时直接跳转可好？

解决此问题的方法也很简单，有两种方案：

1、要么用js实现#id的锚点效果；

2、要么记录上一页的地址(document.referrer)，点击返回时直接跳转到指定页面。

此时艺灵我选择了后者，但是很快就发现又有了新的bug！

3.3、在商品详情页点返回，会进入死循环！？

什么意思呢？就是当我们经历了前面的步骤后，此时在商品详情页点击顶部的返回按钮时并不能正确返回到首页，而是返回到了选择地址页！！！

没听明白？来张表格分析分析。

document.referrer 会打印什么？操作步骤上一页地址首页点商品后会跳转到商品详情http://192.168.31.222:6871/

在商品详情页点运费后会跳转到选择地址页http://192.168.31.222:6871/detail.html

选择地址页使用href直接跳到商品详情页猜猜我是什么(http://192.168.31.222:6871/address.html)

选择地址页使用history.back()跳到商品详情页猜猜我是什么(http://192.168.31.222:6871/)

于是，死循环就出现了！但是，当在选择地址页面通过history.back()的方式回到商品详情页时，document.referrer的结果为http://192.168.31.222:6871/！对此结果，我有点儿发懵，网上搜索一圈后发现以下规律。

href 和 history API页面跳转方式释义表单数据是否保留href跳转页面否

history.back()使浏览器在会话历史记录中后退一页，戳我查看官方文档chrome上测试均存在

history.go([delta])从会话历史记录中加载特定页面戳我查看官方文档0时清空，其他值时保留

3.4、demo在线演示

3.5、最终妥协

几经折腾后，我最终还是选择了使用history.back()的方式来做页面返回的操作。这样一来，选择地址页面就必须要用js替换#id实现锚点跳转的效果了。具体代码就不展示了，我们来看下最终的视频演示效果。视频：history.back()实现商品详情页和地址选择页面间的来回跳转.mp4

(友情提示：点击上面的图片即可播放视频)

四、最后

由于时间关系，文章写的匆忙。相关资料查找的也不是很到位，后续若有机会再完善下。

转载声明：

若亲想转载本文到其它平台，请务必保留本文出处！

本文链接：http://www.yilingsj.com/xwzj/2020-07-05/history-back.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。