localStorage 和 sessionStorage知识点_localstorage.属性名-优快云博客

本文链接：https://blog.youkuaiyun.com/wenwenkaii/article/details/124129681

本文详细介绍了浏览器的localStorage和sessionStorage的区别，包括存储容量、生命周期和用途，以及它们如何在JavaScript中操作。重点在于理解何时选择哪种存储方式来优化数据持久性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

cookie只能存5kb 1兆左右
localStorage sessionStorage 可以达到5兆多

localStorage 对象用于存储数据

如何存?

localStorage.属性名 = 属性值
localStorage.属性名 = JSON.stringify({}[])

如何取？

localStorage.属性名

localStorage Api
localStorage.setItem(“属性名”,“属性值”)
localStorage.getItem(“属性名”)
localStorage.removeItem(“属性名”)
localStorage.clear(“清空”)

sessionStorage 对象用于存储数据
a. 存储
sessionStorage.属性名 = 属性值
sessionStorage.属性名 = JSON.stringify({}[])

    b. 取值
         sessionStorage.属性名

    sessionStorage.setItem("属性名","属性值")
    sessionStorage.getItem("属性名")
    sessionStorage.removeItem("属性名")
    sessionStorage.clear("清空")

localStorage 和sessionStorage的用处?

第一次进入页面 发送请求数据，有些内容不需要改变，或者数据大，不重要的数据的数据，你可以存储在浏览器中，下一次进入页面的时候 不需要发送ajax请求，直接通过浏览器获取对应的数据

localStorage 和sessionStorage的区别?

localStorage 永久存储
sessionStorage 浏览器关闭之后会删除存储的数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        cookie 只能存5kb 1兆左右
        localStorang 可以达到5兆多 (缺点是ios系统是用不了的)

        localStorang 本地存储
        sessionStorage 会话存储


        1.  localStorang  对象  用于存储数据
               
            a.  存储
                localStorang.属性名 = 属性值
                localStorang.属性名 = JSON.stringify({}[])

            b. 取值
                 localStorang.属性名

            localStorage.setItem("属性名","属性值")
            localStorage.getItem("属性名")
            localStorage.removeItem("属性名")
            localStorage.clear("清空")



        2. sessionStorage 对象 用于存储数据
             a.  存储
                sessionStorage.属性名 = 属性值
                sessionStorage.属性名 = JSON.stringify({}[])

            b. 取值
                 sessionStorage.属性名

            sessionStorage.setItem("属性名","属性值")
            sessionStorage.getItem("属性名")
            sessionStorage.removeItem("属性名")
            sessionStorage.clear("清空")

        

        用处 => 第一次进入页面 发送请求数据,
                有些内容不需要改变,或者数据大,
                不重要的数据,你可以存储在浏览器中
                下一次进入页面的时候 不需要发送ajax请求,直接通过浏览器获取对应的数据

        区别
            localStorage 永久存储 
            sessionStorage 浏览器关闭之后会删除存储的数据

        服务器环境启动
            后面哪怕是工作中基本上都是服务器环境启动

     -->

     <div id="box"></div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>

        ( async () => {
            if(localStorage.qwe){
                // console.log(JSON.parse(localStorage.qwe));
                let arr = JSON.parse(localStorage.qwe)
                box.innerHTML = localStorage.qwe
                return;
            }
            let url = "http://www.laixinen.vip/qqq/dage";
            let data = await axios({
                method: "get",
                url,
                params: {
                    num: 6
                }
            })
           localStorage.qwe = JSON.stringify(data.data)
        })()

    </script>
</body>

</html>