JS返回页面时自动回滚到历史浏览位置

在我的系统的实际开发过程中，我满足了一个要求。我需要让应用在页面之间跳转的时候回到每个页面原来的浏览位置，方便用户使用。

我在网上查资料，看到很多方案，有很多不同意见，但真正给出可行可用代码的却很少。因此，我简单地根据自己的想法写了一个用SessionStorage缓存页面的方法。当我离开页面时，我会将容器中所有需要缓存的内容保存在SessionStorage中，当我返回页面时，我会重新加载，方便用户操作。效果如下：

页面缓存

施用方式

用法也很简单，一步一步说吧。

首先，将缓存添加到需要缓存标签的容器类名中，并编写一个名称作为容器的唯一标签。示例如下：

div class=' weui-tab cache ' name=' index './div其次，声明全局变量并获取缓存内容和容器。例子如下：

var缓存；var cacheId=$('。缓存')。attr(' name ')；然后，在加载页面时调用缓存，离开页面时生成缓存。代码如下：

Window.onload=function () {//加载缓存列表load cache(cacheId)；}window.onunload=function () {//可以控制是否需要缓存if(本地存储。needCache==' true ')通过离开页面时needCache的标志{//create cache(cache id)；}}/* * * @brief可以缓存指定的多个控件的内容和位置* @param cacheId缓存元素id * @ return null * */函数create cache(缓存id){//缓存内容var list=[]；var listController=$('。缓存')；$.每个(listController，函数(索引，值，数组){ list . push(value . innerhtml)；})//缓存浏览过的位置var top=[]；var topController=$('。缓存')。查找('。top’)；$.每个(topController，函数(索引，值，数组){ top . push(value . scroll top)；})//保存在sessionstorage.setitem (cacheid，JSON.stringify ({list:list，top 3360 top })；}/* * * @breif可以为指定的多个控件加载缓存* @ param load cache id * @ return null * */function load cache(缓存id){//必须放在整个js文件cache=sessionstorage.getitem(缓存id)的前面；if(cache){ cache=JSON . parse(cache)；//还原内容var listController=$('。缓存')；$.每个(listController，函数(索引，值，数组){ value . innerhtml=cache . list[index]；})//还原位置var top controller=$('。缓存')。查找('。top’)；$.每个(topController，function (index，value，array){ value . scroll top=cache . top[index]；})}}大部分都是可以直接复制的，根据你的需求改进后就可以很好的使用了。

Github交付地址：https://github.com/JunJieDing666/YouZhiGou

摘要

如上所述，边肖介绍的JS在返回页面时会自动回滚到历史浏览位置，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！