使用sessionStorage实现回到离开页面位置

sessionStorage和localStorage以及cookie的区别,这是很多公司面试会问的问题。
      cookie:是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密),cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递
      localStorage:localStorage的生命周期是永久性的。假若使用localStorage存储数据,即使关闭浏览器,也不会让数据消失,除非主动的去删除数据。
      sessionstorage: sessionStorage 的生命周期是在浏览器关闭前,关闭标签页就会删除储存数据。


sessionstorage的方法:
      sessionStorage.key(index) 返回当前sessionStorage对象第index序号的key名称
      sessionStorage.getItem(key) 返回当前sessionStorage对象键名为key对应的value
      sessionStorage.setItem(key,value) 设置一个键为key值为value的sessionStorage对象的成员
      sessionStorage.clear() 清除 sessionStorage对象所有的项
      sessionStorage.removeItem(key) 移除sessionStorage对象中键为key的成员


在项目中主要是用到sessionStorage.getItem()和sessionStorage.setItem()这两个方法。
我将sessionStorage.setItem()方法放在滚动事件中,sessionStorage.getItem()放在window.onload中。
栗子:

$(window).scroll(function(){
   sessionStorage.setItem("scrollTop", $(window).scrollTop());//保存当前滚动位置   
 });
window.onload = function(){
   var scrollTop = sessionStorage.getItem("scrollTop");
   $(document).scrollTop(scrollTop);
 };

这样便可以在回到前一个页面时滚动到用户离开页面的位置。




 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值