浏览器返回的缓存问题

缘分

写这篇文章源于我们在账户上注册、回收、设置时经常需要的要求

Entry=step1=step2=step3=entry

那么，如果在entry页面后单击浏览器的返回，似乎无法按道理返回。(约翰f肯尼迪)。

Entey=step3=step2=step1=entey

要解决此问题，必须使用以下history API:

entey=step 3=step 2=step 1 ————

| |

——3354——————3——3——3——3——33——333——33——3——3——3————3——————3——33——3333——33——3333——33333

浏览器的history API支持负数，以返回到指定索引的历史页面。我的要求在手机应用程序上，可以保证entry必须是第一页，所以最好处理。(威廉莎士比亚，《北安结局》(美国电视剧)，《北安结局》)

(-)；

这样可以达到我们想要的效果，但新的问题又出现了。

新问题，浏览器返回机制不同

我们在entry页面上显示了用户的手机号码，用户修改完毕返回entry页面后，将看到修改后的手机号码。

但是在不同浏览器下，其表现并不一致。某些浏览器（safari、baidu T7、UC等）下，返回后JS初始化代码不执行，所以不会从服务器拉取新的手机号（注意，这是浏览器机制，和缓存无关）。

举个更简单的例子：

alert('init'); $b('click', function() { console('btn click'); });

返回后，alert不会执行，但是点击按钮后，console可以执行。

其实这些浏览器的机制也是有一定道理的：比如page1已经访问过了，返回后是之前访问时的状态，当我从page1 => page2, 如果在page1里的input填过东西，返回后就不用重新填写了，体验会比较好，可惜在这里成为了开发上的一个坑。

而我们熟悉的Chrome浏览器，在返回的时候仅仅是静态资源会走缓存，页面还是会初始化，所以不存在这个问题。

如何解决

1. 想办法让初始化JS执行（多页应用）

凡是会保存history快照的浏览器都不会真正销毁页面，当离开这个页面的时候，如果调用一个setTimeout延迟执行的函数，setTimeout内注册的回调函数会在再次进入该页面时入栈执行。所以可以这样解决：

var unload = isSafari ? 'pagehide' : 'unload'; //safari对unload的支持有问题，当然也可以直接使用pagehide window.addEventListener(unload, function() { setTimeout(function () { init(); //页面初始化函数 }, 200); });

2. 想办法监听到用户点返回的动作（对于单页应用）

返回操作会触发浏览器的popstate事件，因此可以在这方面想办法，没有实践过，不过参考如何监听用户点击浏览器后退按钮这篇文章应该是可以做到的。

希望本文能帮助到您！

点赞+转发，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓-_-）

关注 ｛我｝，享受文章首发体验！

每周重点攻克一个前端技术难点。更多精彩前端内容私信 我 回复“教程”

原文链接：

作者：谢郁