LocalStorge和sessionStorage之间的区别

最新推荐文章于 2024-08-08 16:18:02 发布

拼命学习ing...

最新推荐文章于 2024-08-08 16:18:02 发布

阅读量1.5k

点赞数 1

分类专栏：本地化存储前端-知识点

本文链接：https://blog.csdn.net/qq_43358067/article/details/88540647

版权

前端-知识点同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

本地化存储

1 篇文章 0 订阅

订阅专栏

LocalStorge和sessionStorage之间的区别

localStorage

localStorage的生命周期是永久性的，也就是说使用localStorage存储数据，数据会被永久保存，数据不会因为窗口或浏览器的关闭而消失，除非主动的去删除数据。

localStorage有length属性，可以通过控制台查看其有多少条记录的数据。

var storage = null;
storage.setItem("key","value")   //调用setItem方法存储数据
storage.getItem("key")			//调用getItem方法获取key的值
stroage.removeItem("key")		//删除key对应的值
stroage.clear()				   //清空数据

sessionStorage

sessionStorage的生命周期相比localStorage来说很短，其周期在窗口关闭时结束。也就是说，当浏览器窗口关闭，sessionStorage的使命就已经结束，其保留的数据也会被清除。

sessionStorage也拥有length属性，两者的使用方法也是一致的，但和localstorage比较，仍有一些区别。

页面刷新不会消除已获得的数据

这里我写了两个html文件(test1.html / test2.html)来进行说明：

因为篇幅问题，所以只取了部分需要注意的代码段

这是test1.html的部分代码：

<body>
    <button>跳转按钮</button>
    <div>页面的作用:在 sessionStorage 中存数据</div>
    <script>
        var Data = window.sessionStorage;
        console.log(Data)
        var str = 'sessionData'
        // sessionStorage 存储数据 
        Data.setItem('code',str)
        document.getElementsByTagName('button')[0].onclick = function(){
            window.location.href = './test2.html'
        }
    </script>
</body>

test2.html的部分代码：

<body>
    <div>我是test2页面</div>
    <script>
        
      var sessionData = sessionStorage.getItem('code')
      console.log(sessionData)
      console.log(sessionStorage.getItem('code'))
    </script>
</body>