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 相关文章推荐
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
用p5.js制作烟花特效的示例代码
Mar 21 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
小程序中的箭头函数的具体使用
Jun 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
摩卡咖啡
2021/03/03 咖啡文化
PHP远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
PHP中each与list用法分析
2016/01/08 PHP
php图像验证码生成代码
2017/06/08 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
JS实现点击下载的小例子
2013/07/10 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
Python常用算法学习基础教程
2017/04/13 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
请说出以下代码输出什么
2013/08/30 面试题
诉讼授权委托书范本
2014/10/05 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
angular异步验证器防抖实例详解
2022/03/31 Javascript
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js
Mysql数据库group by原理详解
2022/07/07 MySQL