zoukankan      html  css  js  c++  java
  • sessionStorage的有趣之处---缓存页面滚动的位置

    方法

     string sessionStorage.key(int index) :返回当前 sessionStorage 对象的第index序号的key名称。若没有返回null。
     string sessionStorage.getItem(string key) :返回键名(key)对应的值(value)。若没有返回null。
     void sessionStorage.setItem(string key, string value) :该方法接受一个键名(key)和值(value)作为参数,将键值对添加到存储中;如果键名存在,则更新其对应的值。
     void sessionStorage.removeItem(string key) :将指定的键名(key)从 sessionStorage 对象中移除。
     void sessionStorage.clear() :清除 sessionStorage 对象所有的项。
     
     
     
     

    localStorage 和 sessionStorage 

      客户端存储数据的两个对象为:
        localStorage - 没有时间限制的数据存储,作用在同源窗口中
        sessionStorage - 针对一个 session 的数据存储(关闭窗口,存储的数据清空)
      了解完sessionStorage之后是不是很符合我们的需求呢?将数据存到 session中,管你前进后退还是刷新,数据依然在,关闭窗口后再进页面才会清空数据,那么完全符合需求
      再理一下实现思路,①页面滚动,将滚动位置存到session中 → ②再次进到页面中,到session中取出上次保存的浏览位置 → ③滚动到对应位置
     
     
     
     当前给出setItem和getItem的部分代码

     

      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);
    };
     
     
     
     
  • 相关阅读:
    Netty源码分析之ByteBuf引用计数
    GitHub git push大文件失败(write error: Broken pipe)完美解决
    Windows10 Docker安装详细教程
    全面的Docker快速入门教程
    十本你不容错过的Docker入门到精通书籍推荐
    CentOS 8.4安装Docker
    postgres之一条sql查询总数及部分数据
    neo4j相关操作
    git上传大文件
    分布式文件系统fastdfs安装以及python调用
  • 原文地址:https://www.cnblogs.com/t-sun-j/p/10387206.html
Copyright © 2011-2022 走看看