【单页应用巨坑之History】细数History带给单页应用的噩梦

本文探讨了单页应用中处理History对象的挑战,包括pushState和replaceState带来的复杂性,以及如何处理回退逻辑。文章列举了History与单页应用交互时可能出现的问题,如业务逻辑与浏览器行为冲突,导致用户体验混乱。提出了需要考虑业务需求和History一致性,以避免回退操作引发的异常状况。
摘要由CSDN通过智能技术生成

前言

在我们日常的网页浏览中,我们非常喜欢做一个操作:点击浏览器的前进后退
在Ajax技术出现后,有些时候前进后退就会给开发者带来困扰,甚至一些开发者试图去干掉History
随着Html5的发展,移动端的兴旺,单页应用出现了,于是History的处理被不得不提上议程了!
要知道,这一直是一项让人不愿意去碰的巨坑,但是单页应用却不得不去解决

首先History的处理逻辑看似简单,实则复杂,稍不注意就会出问题,我们这里来探讨下单页中History的处理规则

基础知识

javascript中History的历史对象包含用户已经浏览的URL信息,这就是我们传说中的历史记录
我们一般会用到forward/back两个方法与一个length接口,或者使用go具体到哪一层

后面一点,浏览器厂商发现History对象确实被管的过紧,于是又释放了两个关键接口,pushState以及replaceState,用于操作History对象

于是我们今天的一个重点便是这里的pushState以及replaceState,这两位同学可以向History中压入对象,并且在浏览器前进后退时会被触发

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

老虎帅呆了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值