美文网首页
sessionStorage存储和localStorage存储

sessionStorage存储和localStorage存储

作者: 我是syq吖 | 来源:发表于2019-07-30 15:03 被阅读0次

    (1)在存储用户数据的时候,因为cookie可以存储的数据比较小才4KB左右
    所以也可以考虑使用sessionStorage来存储,大小限制为2M左右
    (2)该技术和localStorage是h5推出的,因此在使用的时候,需要考虑到兼容性的问题
    (3)简单介绍和使用:
    localStorage- 没有时间限制的数据存储,生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。
    sessionStorage会话存储技术(session-会话)仅在当前会话下有效,关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。源生接口可以接受,亦可再次封装来对Object和Array有更好的支持。

    //添加操作
    window.sessionStorage.setItem("name",oInput.value)
    //获取操作
    window.sessionStorage.getItem("name")
    //更新操作
    window.sessionStorage.setItem("name",oInput.value)
    //删除操作
    window.sessionStorage.removeItem("name")
    //清空操作
     window.sessionStorage.clear()
    

    但是请回忆一下这样的场景,打开某个APP,弹出一个购买会员的广告,果断关掉,然后前进、后退、刷新,广告都不出来了,

    关掉APP后重新打开,广告又来了~~

    这时如果明白sessionstorage,很快也就会清楚这个功能怎么实现的

    实现思路

    ①查询sessionStorage是否有关闭广告标记 sessionStorage.setItem("key", "value")
    ②根据标记隐藏或者显示广告 sessionStorage.getItem("key")
    

    这样,每次关闭浏览器或者APP,广告都会重新弹出来

    其它应用举例
    阅读文章时,不小心刷新页面,会跳到上次浏览位置

    ①页面滚动,将滚动位置存到session中(如果有分页,则同时存储页码)
    ②再次进到页面中,到session中取出上次保存的浏览位置和存储的页码
    ③(如果有分页,先打开响应页码),滚动到对应位置

    $(window).scroll(function(){
        if($(document).scrollTop()!=0){
        sessionStorage.setItem("offsetTop", $(window).scrollTop());//保存滚动位置
        } 
    });
    
    window.onload = function()
    {
      var _offset = sessionStorage.getItem("offsetTop");
      $(document).scrollTop(offsetTop);
    };
    
    //获取localStorage存储数据
    window.localStorage.getItem(name)
    //设置localStorage存储数据
    window.localStorage.setItem(name, content)
    //删除localStorage存储数据
    window.localStorage.removeItem(name)
    

    相关文章

      网友评论

          本文标题:sessionStorage存储和localStorage存储

          本文链接:https://www.haomeiwen.com/subject/ealnrctx.html