• sessionStorage获取用户行为


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

      预想解决方案:

      1、将浏览时的滚动位置存到cookie里,进到这个页面再取。多久销毁?不灵活...pass

      2、将详情页通过ifram或者弹框方式引到当前页,通过操作关闭当前弹窗(那么在已经完成的页面上再重构,加操作按钮?那么加载效率和体验呢?...反正不看好)

      3、将浏览时的滚动位置传到服务器端,加载页面时,根据用户来取最后浏览的位置,各种参数传来调去(与方案一类似)

      4、通过H5本地存储的方式将数据存起来,需要时取值(没啥经验,先研究一下吧,好像挺靠谱)

      接下来先了解一下什么是本地存储吧!

    •   简介:

      HTML5 web 存储,一个比cookie更好的本地存储方式。

      

      什么是 HTML5 Web 存储?

      使用HTML5可以在本地存储用户的浏览数据。

      早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能.

      数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

      localStorage 和 sessionStorage 

      客户端存储数据的两个对象为:

    • localStorage - 没有时间限制的数据存储
    • sessionStorage - 针对一个 session 的数据存储(关闭窗口,存储的数据清空)

      了解完sessionStorage之后是不是很符合我们的需求呢?将数据存到 session中,管你前进后退还是刷新,数据依然在,关闭窗口后再进页面才会清空数据,那么完全符合需求啊,看到这玩意简直激动快要泪奔了!!!

      再理一下实现思路,①页面滚动,将滚动位置存到session中 → ②再次进到页面中,到session中取出上次保存的浏览位置 → ③滚动到对应位置

      这家伙简直好玩到嗷嗷叫啊,睁大眼睛看重点咯!

      这里只介绍setItem和getItem,当然还有什么removeItem删除key、clear清除所有的key/value操作。

      setItem存储value

      用途:将value存储到key字段
      用法:.setItem( key, value)
      代码示例:

       sessionStorage.setItem("key", "value"); 	localStorage.setItem("site", "js8.in");

      getItem获取value

      用途:获取指定key本地存储的值
      用法:.getItem(key)
      代码示例:

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

    //onload时,取出并滚动到上次保存位置

    
    
    window.onload = function()
    {
      var _offset = sessionStorage.getItem("offsetTop");
    
      $(document).scrollTop(offsetTop);
    };
  • 相关阅读:
    Autoit 使用
    小狼毫安装五笔输入法
    MIT 6.824 MapReduce
    基于JDBC封装数据库基本CURD操作
    利用反射特性完成对象的拷贝
    基于HTTP协议和HttpURLConnection完成网上资源的爬取
    应用多线程解决文件拷贝加进度条项目
    java动态代理详解
    [转]String、StringBuffer与StringBuilder之间区别
    “内聚性”和“耦合性”
  • 原文地址:https://www.cnblogs.com/chengl062/p/12844119.html
Copyright © 2020-2023  润新知