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

 更新时间:2018年09月26日 10:27:31   作者:丁俊杰_  
这篇文章主要介绍了JS返回页面时自动回滚到历史浏览位置的相关知识,本文给大家使用的是SessionStorage来存储页面内容,在返回页面时重新加载,具体实现代码大家跟随小编一起看看吧

在我的系统实际开发过程中遇到一个需求,我需要让应用在各个页面间跳转时回到每页原先浏览到的位置,方便用户使用。

在网上查资料时,看到的方案有不少,众说纷纭,但真正给出可行可用代码的寥寥无几,所以我干脆按自己的想法用SessionStorage写了一个缓存页面的方法,在离开页面时将需要缓存的容器中所有内容都存到SessionStorage中,在返回页面时重新加载,方便用户操作,效果如下:

页面缓存

使用方法

用法也很简单,咱一步一步讲。

首先,在你需要缓存标签容器的类名中加入cache,并写一个name作为该容器的唯一标记,示例如下:

<div class="weui-tab cache" name="index">
 ....
</div>

其次,声明全局变量,获取缓存内容和容器,示例如下:

var cache;
var cacheId = $(".cache").attr("name");

随后,在页面加载时调用缓存,在离开页面时生成缓存,代码如下:

window.onload = function () {
 //载入缓存的列表
 loadCache(cacheId);
}

window.onunload = function () {
 //可以通过needCache这个flag来控制是否需要缓存
 if (localStorage.needCache == 'true') {
  //离开页面时生成缓存
  createCache(cacheId);
 }
}

/* *
 * @brief 可对指定多个控件进行内容和位置的缓存
 * @param cacheId 缓存元素的id
 * @return null
 * */
function createCache(cacheId) {
 //对内容进行缓存
 var list = [];
 var listController = $('.cache');
 $.each(listController, function (index, value, array) {
  list.push(value.innerHTML);
 })
 //对浏览到的位置进行缓存
 var top = [];
 var topController = $(".cache").find(".top");
 $.each(topController, function (index, value, array) {
  top.push(value.scrollTop);
 })
 //存入sessionstorage中
 sessionStorage.setItem(cacheId, JSON.stringify({
  list: list,
  top: top
 }));
}

/* *
 * @breif 可对指定多个控件加载缓存
 * @param 加载缓存的id
 * @return null
 * */
function loadCache(cacheId) {
 //一定要放在整个js文件最前面
 cache = sessionStorage.getItem(cacheId);
 if (cache) {
  cache = JSON.parse(cache);
  //还原内容
  var listController = $('.cache');
  $.each(listController, function (index, value, array) {
   value.innerHTML = cache.list[index];
  })
  //还原位置
  var topController = $(".cache").find(".top");
  $.each(topController, function (index, value, array) {
   value.scrollTop = cache.top[index];
  })
 }
}

大部分都可以直接copy,再根据你的需要改进一下,就可以很好的使用了。

github传送地址: https://github.com/JunJieDing666/YouZhiGou

总结

以上所述是小编给大家介绍的JS返回页面时自动回滚到历史浏览位置,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • JavaScript高级程序设计 XML、Ajax 学习笔记

    JavaScript高级程序设计 XML、Ajax 学习笔记

    JavaScript高级程序设计 XML、Ajax 学习笔记,需要的朋友可以参考下。
    2011-09-09
  • js实现base64文件的处理以及下载方法

    js实现base64文件的处理以及下载方法

    Base64是一种将二进制数据编码为ASCII字符的编码方式,这篇文章主要给大家介绍了关于js实现base64文件的处理以及下载的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-07-07
  • 用js遍历 table的脚本

    用js遍历 table的脚本

    js遍历table的所有元素的代码,方便我们控制table的所有元素,颜色,样式等
    2008-07-07
  • js+Html实现表格可编辑操作

    js+Html实现表格可编辑操作

    这篇文章主要为大家详细介绍了js+Html实现表格可编辑操作,能动态添加删除行,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • JavaScript使用指针操作实现约瑟夫问题实例

    JavaScript使用指针操作实现约瑟夫问题实例

    这篇文章主要介绍了JavaScript使用指针操作实现约瑟夫问题,实例分析了javascript模拟数组指针操作的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 微信小程序实现搜索功能

    微信小程序实现搜索功能

    这篇文章主要介绍了微信小程序实现搜索功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • element中的$confirm的使用

    element中的$confirm的使用

    这篇文章主要介绍了element中的$confirm的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • JavaScript调试常见报错及原因分析

    JavaScript调试常见报错及原因分析

    这篇文章主要介绍了JavaScript调试常见报错及原因分析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • 微信小程序实现手指拖动选项排序

    微信小程序实现手指拖动选项排序

    这篇文章主要介绍了微信小程序实现手指拖动选项排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-04-04
  • 如何基于JavaScript判断图片是否加载完成

    如何基于JavaScript判断图片是否加载完成

    这篇文章主要介绍了如何基于JavaScript判断图片是否加载完成,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12

最新评论