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);
    };
     
  • 相关阅读:
    Android Widget小组件开发(一)——Android实现时钟Widget组件的步骤开发,这些知识也是不可缺少的!
    java基础——static keyword小节
    iOS UI08_UITableView
    Android 6.0 开发人员对系统权限的使用与练习(Permissions Best Practices)
    Android简单实现BroadCastReceiver广播机制
    UI组件之TextView及其子类(一)TextView和EditText
    BZOJ 3112 [Zjoi2013]防守战线 线性规划
    反射 + 配置文件 实现IOC容器
    android:异步任务asyncTask介绍及异步任务下载图片(带进度条)
    【LeetCode-面试算法经典-Java实现】【058-Length of Last Word (最后一个单词的长度)】
  • 原文地址:https://www.cnblogs.com/DoubleLoong/p/8318063.html
Copyright © 2011-2022 走看看