zoukankan      html  css  js  c++  java
  • sessionStorage 实现点击进入详情页,返回时回到用户刚刚浏览的位置

    之前一段时间面试,包括朋友们的面试中经常会问到一个需求:

      如果用户好不容易翻到了第几十、几百乃至几千条时,难道要用户再重头开始?

      所以需求方要求用户在一个列表页浏览时,点击一个列表进入详情页,返回要求记录用户刚刚浏览的位置,而不是重新刷新页面到了页面顶部。

    被问到之后就在想如何实现(ps:因为我觉得不仅是要应付面试,同时这个需求真的太常见了,我竟然不会。),后来想了几个解决方案:

      1、将浏览时的滚动位置传到服务器端,加载页面时根据用户来取最后浏览的位置,感觉参数满天飞(我讨厌参数...)

      2、将详情页通过 <iframe> 或者 弹窗 引到当前页,通过操作关闭当前弹窗(没有参数,但要在当前页搞来搞去,既不美观又不实用)

      3、保存页面的值,当然就想到 cookie 了,将浏览时的滚动高度(位置)存到 cookie 里,进到这个页面再取。不过想想销毁的时机不好确定也就放弃了。

      4、通过 H5 本地存储的方式将数据存起来,需要时取值(没用过) cookie 不能用,还有 localStorage 和 sessionStorage

    localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

    • localStorage      -  生命周期是永久,这意味着除非用户显示在浏览器提供的 UI 上清除 localStorage 信息,否则这些信息将永远存在。
    • sessionStorage -  生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。

      不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。

    这里需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。

      详细了解:http://adamed.iteye.com/blog/1698740

      HTML 5 Web 存储(w3school):http://www.w3school.com.cn/html5/html_5_webstorage.asp

    重点

    按步骤:

    页面滚动,将滚动位置存到session中

    // 滚动时 sessionStorage.setItem(key,value) 保存滚动位置
    $(window).scroll(function(){
    if($(document).scrollTop()!=0){
    sessionStorage.setItem("offsetTop", $(window).scrollTop());//保存滚动位置
    }
    });

    再次进到页面中,到session中取出上次保存的浏览位置,并滚动到对应位置

    // onload时 sessionStorage.getItem(key) 取出并滚动到上次保存位置
    window.onload = function()
    {
    var _offset = sessionStorage.getItem("offsetTop");
    $(document).scrollTop(_offset);
    };
     
  • 相关阅读:
    共享无法访问问题,通过ip地址或者主机名无法访问目的主机
    开机系统更新,一直停在?%处,无法进入系统
    win7电脑访问内网地址报错0x800704cf,0x80070035解决方法
    电脑共享--问题汇总
    win10域账户用户时间无法和域服务器同步
    卸载WPS后,原office出现各种问题,报错,图标混乱
    局域网新装电脑主机网络断断连连解决方案
    win10主机无法进入本地共享,“没有权限”
    win10安装部分软件报错“应用程序无法启动,应用程序并行配置不正确,或使用命令行sxstrace.exe”
    【日常修机】打印机故障维护
  • 原文地址:https://www.cnblogs.com/DoubleLoong/p/8318063.html
Copyright © 2011-2022 走看看