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);
    };
     
  • 相关阅读:
    14.18 InnoDB Backup and Recovery 备份和恢复:
    14.18 InnoDB Backup and Recovery 备份和恢复:
    php使用 _before_index() 来实现访问页面前,判断登录
    php使用 _before_index() 来实现访问页面前,判断登录
    查询方式实例演示
    查询方式实例演示
    haproxy timeout server 46000 后台超时时间
    haproxy timeout server 46000 后台超时时间
    14.10.5 Reclaiming Disk Space with TRUNCATE TABLE 回收空间使用TRUNCATE TABLE
    14.10.5 Reclaiming Disk Space with TRUNCATE TABLE 回收空间使用TRUNCATE TABLE
  • 原文地址:https://www.cnblogs.com/DoubleLoong/p/8318063.html
Copyright © 2011-2022 走看看