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


Posted in Javascript onSeptember 26, 2018

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

在网上查资料时,看到的方案有不少,众说纷纭,但真正给出可行可用代码的寥寥无几,所以我干脆按自己的想法用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返回页面时自动回滚到历史浏览位置,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript检测对象中是否存在某个属性判断方法小结
May 19 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
javascript实现简易计算器的代码
May 31 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
Sep 26 #Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 #Javascript
深入理解react-router 路由的实现原理
Sep 26 #Javascript
node.js使用redis储存session的方法
Sep 26 #Javascript
详解Axios统一错误处理与后置
Sep 26 #Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 #Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 #Javascript
You might like
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
js验证上传图片的方法
2015/05/12 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
深入理解python中的atexit模块
2017/03/07 Python
Python制作刷网页流量工具
2017/04/23 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
Python实现图像的垂直投影示例
2020/01/17 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
python实现扫雷小游戏
2020/04/24 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
结构工程个人自荐信范文
2013/11/30 职场文书
求职简历自我评价范例
2014/03/12 职场文书
服务口号大全
2014/06/11 职场文书
商务经理岗位职责
2014/07/30 职场文书
无私奉献演讲稿
2014/09/04 职场文书
工程技术员岗位职责
2015/04/11 职场文书
专职安全员岗位职责
2015/04/11 职场文书
小学教师见习总结
2015/06/23 职场文书
导游词之青岛崂山
2019/12/27 职场文书
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript