在订单结算过程中，通过AJAX获取并显示发票信息。当因故无法提交订单返回前页时，原有的发票数据丢失。通过处理history对象，利用history.replaceState方法保存页面状态，确保返回时能恢复ajax加载的内容。在返回页面时检查state，如果存在信息则重新展示，从而解决了数据丢失问题。
情景实现：项目有个任务就是在订单结算提交前可以增加发票抬头，用的是AJAX请求后台后返回数据展示在前端页面，添加完同时选取该发票后提交订单，如果因为各类原因（比如余额不足，库存不够）的影响订单提交不成功，用户想返回上一页修改订单重新下单结算时，发现刚才新增的发票数据不见了，ajax获取并插入页面的结构都没有了，而实际上数据是存在的。
解决方案：网上查询后发现可以通过处理history对象来解决。可以用history.pushState方法和history.replaceState以及window对象的popstate事件，这个方式可以让你用JS自己控制URL和前进后退事件，并且用ajax刷新网页的局部内容。
使用了history.replaceState方法来改变当前页面的state，每次ajax获取信息后，将页面中希望保留的内容放入state中，当返回到这个页面中时，读取state中的信息，如果state不为null，那么将state中的页面结构展示出来。
步骤很简单，大概分两步：
1、ajax获取信息并拼装到html结构后，将希望保留的html结构放入state中
最低0.47元/天 解锁文章
扫一扫
731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
