【无标题】

本文探讨了如何利用HTML5的Web存储技术,特别是sessionStorage,来保存和恢复用户浏览页面时的滚动位置。通过在滚动时将位置存入sessionStorage,在页面加载时读取并滚动到相应位置,实现浏览体验的连续性。文章介绍了setItem和getItem等基本操作,并给出了具体的代码示例,展示了如何在页面滚动和加载时应用这些方法。
摘要由CSDN通过智能技术生成

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);
};
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值