今天想跟大家伙儿聊聊我在项目里用到的一个特有意思的小玩意儿—— 。相信不少做前端的朋友都遇到过跟我类似的情况,就是在处理页面跳转的时候,总想让用户在不同页面之间来回穿梭得更顺溜点儿。我之前也是这样,琢磨着怎么能让页面跳转更自然,用户体验更
刚开始的时候,项目里有些页面需要返回上一页,我第一时间想到的就是用 *(-1)
或者 。这俩哥们儿都能实现返回上一页的功能,用起来也挺简单的。我兴冲冲地就在代码里加上这两行,心想这下可算是解决。
我接着测试一下,在电脑浏览器里,这么用确实没啥毛病,页面唰的一下就返回去。可后来我在手机上,特别是在微信浏览器里一试,发现有时候页面是返回去,但数据没,变成空白页。这可把我给整懵。
后来我去查一些资料才知道,原来, 这家伙保存用户在一个会话期间的网站访问记录。用户每次访问一个新的网址,它就创建一个新的历史记录。 可以通过数字参数,来控制页面是前进还是后退。而且*(0)
,代表刷新当前页面。
可是问题来,和在不同的浏览器,或者不同的环境下,表现可能不太一样。有的浏览器,像安卓上的一些,返回页面时会刷新,把原来的数据都清空。而有的浏览器,像iOS上的一些,它可能直接就调用缓存,数据还在,但可能不是最新的。这就导致我在微信浏览器里遇到的那个问题。
这让我开始头疼。因为项目里页面比较多,有的页面返回时需要保留数据,有的页面返回时需要刷新。如果每个页面都单独设置跳转逻辑,那代码岂不是要写得乱七八糟的?我可不想这样。于是我就开始琢磨,有没有什么办法能统一处理这个问题?
后来我想到一个办法,就是结合和来控制页面的跳转,根据需求情况,具体情况具体分析。这样可以在一定程度上解决不同浏览器的兼容性问题,也能满足不同页面的需求。虽然这种方法也有一定的局限性,但是在实际使用中,还是比较有效的。因为需求里需要刷新的情况比较多,所以我还是结合*(0)
来实现需求。
这只是我个人在项目中的一点小小的实践经验。可能还有更好的方法,或者更优雅的解决方案。如果大家有啥好点子,也欢迎在评论区留言,咱们一起交流学习。毕竟做技术嘛就是要不断折腾,不断探索,才能不断进步!
- 遇到的问题:
- 在电脑浏览器中使用
*(-1)
或 返回上一页功能正常。 - 在手机微信浏览器中,返回上一页有时会出现空白页,数据丢失。
- 不同浏览器对 和 的处理方式不同,安卓会刷新页面,iOS 有时会调用缓存。
- 项目中页面较多,部分页面返回需要保留数据,部分页面返回需要刷新,难以统一处理。
- 在电脑浏览器中使用
- 解决过程:
- 查阅资料解 的工作原理,以及 和 的区别。
- 尝试结合 和 来控制页面跳转,根据具体情况分析,实现刷新当前页面的需求。
- 最终实现:
- 根据具体需求使用
*(0)
实现需求。
- 根据具体需求使用