本地存储：localStorage，sessionStorage，和cookie。区别

news2024/11/24 3:07:26

localStorage：

特点：

永久存储
支持跨页面通讯，也就是在其他页面同样可以获取到你存好的数据。
只能存储字符串类型的数据，不能存储复杂数据类型

sessionStorage：

特点：

临时存储，会话级别，页面（浏览器）关闭就没了
虽然支持跨页面通讯，但是要求必须是从当前页面跳转过去的并且是当前窗口打开才行。
只能存储字符串类型的数据，不能存储复杂数据类型。

<body>
    <button id="set">存储数据</button>
    <button id="get">获取数据</button>
    <button id="set2">修改数据</button>
    <button id="remove">删除数据</button>
    <button id="clear">清除数据</button>


    <script>
        /* 本地存储：讲程序中产生的一些数据存储到本地：storage,sessionStorage */
        /* 区别：一个永久存储，一个会话存储 */
        /* 方案一：storage :永久存储，只要不手动删除就一直存在，可跨页面通讯，只能存字符串类型数据，不能存复杂类型的数据
            //增删改查
            1.存数据：window.localStorage.setItem(key,value)
            2.获取数据：window.localStorage.getItem(key)
            3.修改数据（和存一样）：window.localStorage.setItem(key,value)
            4.删除数据：window.localStorage.removeItem(key)
            5.一键清空：window.localStorage.clear()
        */ 

        /* 方案二：sessionstorage：临时存储，不能离开会话打开新页面 */
        //增删改查
        // 1.存数据：window.localStorage.setItem(key, value)
        // 2.获取数据：window.localStorage.getItem(key)
        // 3.修改数据（和存一样）：window.localStorage.setItem(key, value)
        // 4.删除数据：window.localStorage.removeItem(key)
        // 5.一键清空：window.localStorage.clear()


/* 如下：方案二使用只需要换个名字即可： */
        // 增
        // window.localStorage.setItem('哈哈' , 'haha')
        var set = document.getElementById('set')
        set.onclick = function () {
            window.localStorage.setItem('name', '徐')
            window.localStorage.setItem('age', '28')
        }
        //删
        var remove = document.getElementById('remove')
        remove.onclick = function () {
            window.localStorage.removeItem('age')
        }
        //改
        var set2 = document.getElementById('set2')
        set2.onclick = function () {
            window.localStorage.setItem('age', '18')

        }
        //查
        var get = document.getElementById('get')
        get.onclick = function () {
            var res2 = window.localStorage.getItem('name')
            // 只有查的时候需要打印
            console.log(res2)
        }
        //一键清空
        var clear = document.getElementById('clear')
        clear.onclick = function () {
            window.localStorage.clear()
        }

    </script>
</body>

cookie：

特点：

只能存储字符串类型数据
存储的数据大小有限，只能存储4kb左右
会话几别的存储，浏览器关了就没了。但是我们可以设置过期时间
cookie的操作必须依赖服务器

<body>
    <button id="get">获取</button>

    <script>
        /* 
            要想看到cookie的存取，必须通过服务器打开页面（借助于live server插件即可）
            存数据：document.cookie = ‘key = value;’
            获取数据的语法：document.cookie，获取到的识别cookie中所有的数据，并且是一个字符串类型的数据。
            要想单独拿到某一条数据，自己写拆分逻辑。

            cookie默认也是会话级别，浏览器关闭数据就没了
            cookie可以手动设置过期时间。
            设置过期时间的语法：document.cookie = ‘key = value;expires=’+时间对象
        */

        // 创造时间对象
        // var d = new Date('2022-12-8 17:28') //d变量就是我们时间对象
        // document.cookie = 'username=张三;expires=' + d.toGMTString()
        // document.cookie = 'password=123456;'
        // document.cookie = 'age=20;'


        var getBtn = document.getElementById('get')
        getBtn.onclick = function () {
            var data = document.cookie//data变量中存储的就是cookie中的数据
            var arr = data.split(';')
            // console.log(arr[0].split('=')[1]);
        }
    </script>
</body>