• 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);
    };
     
  • 相关阅读:
    字典的操作用法小总结
    HTTP Headers解析
    RStdio常用快捷键
    R语言数据类型
    数据科学实战手册(R+Python)书中引用资料网址
    ggplot2使用初探
    urllib2使用初探
    R语言以及RStdio的安装
    目标检测--Selective Search for Object Recognition(IJCV, 2013)
    关于Python的lambda
  • 原文地址:https://www.cnblogs.com/DoubleLoong/p/8318063.html
Copyright © 2020-2023  润新知