【每日知识】localStorage与sessionStorage的区别

谢豪杰

已于 2022-03-08 20:26:08 修改

阅读量999

点赞数 3

分类专栏：每日知识文章标签： api javascript

于 2022-03-05 15:45:06 首次发布

本文链接：https://blog.csdn.net/qq_46580087/article/details/123295819

版权

每日知识专栏收录该内容

57 篇文章 6 订阅

订阅专栏

简单的理解localStorage与sessionStorage的异同点

localStorage：

localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。

sessionStorage：

sessionStorage 的生命周期是在浏览器关闭前。在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的。

相同点：

作用一致，都用于存储数据的；

都是只能存储字符串类型数据(上限5MB)；

不同点：存储方式不同

localStorage：硬盘存储（永久存储，页面关闭还在，存在硬盘）

sessionStorage：内存存储（临时存储，页面关闭了就消失）

一个永久一个短命

localStorage和sessionStorage如何存储引用类型数据（数组和对象）？

转json存储

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button class="btn1">存对象</button>
    <button class="btn2">取对象</button>
    <script>
        /* 
        json -> js :   let jsObj = JSON.parse( json格式 )
        js -> json :   let jsonStr = JSON.stringify( js对象 )
        */  

        let obj = {
            name:'ikun',
            age:30,
            sex:'男'
        }
        
        document.querySelector('.btn1').onclick = function(){
            //存 ： (1)js -> json  (2)存json
            // //(1)js->json
            // let jsonStr = JSON.stringify( obj )
            // //(2)存json
            // localStorage.setItem('user',jsonStr)

            //合写一行
            localStorage.setItem('user',JSON.stringify( obj ))
        }

        document.querySelector('.btn2').onclick = function(){
            //取: (1)取json  (2)json->js
            // //(1)取json
            // let jsonStr = localStorage.getItem('user')
            // //(2)json->js
            // let jsObj = JSON.parse( jsonStr )
            // 

            //合写一行
            let jsObj = JSON.parse( localStorage.getItem('user') )
            console.log( jsObj )
            
        }
    </script>
</body>
</html>