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

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

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

页面缓存

使用方法

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

首先,在你需要缓存标签容器的类名中加入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返回页面时自动回滚到历史浏览位置,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

标签:
js,回滚,js,返回页面

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

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

暂无“JS返回页面时自动回滚到历史浏览位置”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。