cookie，sessionStorage与localStorage

H_HX126

已于 2023-02-23 09:44:19 修改

阅读量409

点赞数 2

文章标签：服务器前端运维

于 2022-08-30 15:51:55 首次发布

本文链接：https://blog.csdn.net/weixin_46058007/article/details/126605730

版权

存储大小

cookie：不能超过4K。

sessionStorage与localStorage：比cookie大得多，可以达到5M甚至更大。

有效时间

localStorage：存储持久化数据，浏览器关闭后数据不会丢失，除非主动删除数据。

sessionStorage：数据在浏览器关闭后自动删除。

cookie：可以设置过期时间，在cookie过期时间之前一直有效，浏览器窗口关闭后数据不会丢失。

与服务器的交互方式

cookie：通过http，在浏览器和服务器传递。数据会自动传递到服务器，服务器也可以写cookie到客户端。

sessionStorage与localStorage：不会自动把数据发给服务器，仅在客户端本地保存。

作用域

cookie：在所有同源窗口共享。

sessionStorage：仅在一个浏览器共享，不同浏览器不共享。

localStorage：在所有同源窗口共享。

代码展示

cookie

<!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>cookie封装</title>
</head>
<body>
    <script src="./cookie.js"></script>
    <script>
        // 设置cookie
        setCookie("username", "吴甜馨", 1)
        setCookie("password", "tianxin0722", 2)
        setCookie("age", 22, 2)

        // 获取cookie
        getCoookie("username")
        getCoookie("password")
        getCoookie("age")

        // 删除cookie
        removeCookie("age")
        
        // 设置cookie
        function setCookie(key, val, t) {
            var time = new Date()
            time.setDate(time.getDate() + t)
            document.cookie = key+"="+val+";expires="+time
        }

        // 获取cookie
        function getCoookie(key) {
            var cookies = document.cookie
            var arr = cookies.split(";")
            for(var i=0;i<arr.length;i++) {
                var newarr = arr[i].trim().split("=")
                if(newarr[0] == key) {
                console.log(newarr[1]);
                }
            }
        }

        // 删除cookie
        function removeCookie(key) {
            setCookie(key, '', -1)
        }

    </script>
</body>
</html>

localStorage

<!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>localstorage</title>
</head>
<body>
    <script>
        // 设置localstorage
        localStorage.setItem("username", "wutianxin")
        localStorage.setItem("password", "tianxin0722")
        localStorage.setItem("age", 22)
        // 数据为对象格式， 在设置时需要将数据转为字符串格式
        var person = {
            name: "崔梦豪",
            age: 23,
            sex: "男"
        } 
        localStorage.setItem("person", JSON.stringify(person))


        // 获取localstorage
        localStorage.getItem("username")
        console.log(localStorage.getItem("username"))
        // 获取对象格式的数据时，需要将数据重新转为对象格式，否则无法单独获取对象中的单条数据
        console.log(localStorage.getItem("person"))
        console.log(JSON.parse(localStorage.getItem("person")))
        console.log(JSON.parse(localStorage.getItem("person")).name)


        // 打印所有的localstorage
        console.log(localStorage)
        console.log(localStorage.length)
        console.log(localStorage.key(0));
        console.log(localStorage.getItem(localStorage.key(0)));


        // 删除localstorage
        localStorage.removeItem("age")
        // localStorage.clear()
    </script>
</body>
</html>

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>sessionstorage</title>
</head>
<body>
    <script>

        window.addEventListener('storage', function(e) {
            console.log(e);
        })
        // 设置sessionStorage
        sessionStorage.setItem("name", "崔梦豪")
        sessionStorage.setItem("age", 23)
        // 获取sessionStorage
        console.log(sessionStorage.getItem("name"));
        // 删除sessionStorage
        sessionStorage.removeItem("age")
        sessionStorage.clear()
    </script>
    
</body>
</html>