长期存储临时存储 cookie 本地存储的区别

最新推荐文章于 2024-10-01 20:12:28 发布

html5小趴菜

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量102

点赞数

文章标签： javascript Powered by 金山文档

本文链接：https://blog.csdn.net/mx0102/article/details/128718146

版权

本文介绍了前端开发中常见的三种本地存储方式：localStorage、sessionStorage和cookie。详细讲解了它们的增删查改操作，以及cookie的过期时间和设置方法。localStorage和sessionStorage分别用于长期和临时数据存储，而cookie则涉及到设置过期时间及获取cookie的示例。

摘要由CSDN通过智能技术生成

长期存储（localStorage ）

// localStorage     (增   删一条  清空   查)
        // 1. 增        window.localStorage.setItem(key, value)
         window.localStorage.setItem('qq1', 'QF001')
         window.localStorage.setItem('qq2', '66666666')

        // 2. 查        window.localStorage.getItem(key)
         var qq = window.localStorage.getItem('qq')
         var pw = window.localStorage.getItem('password')    // 因为没有对应的 key, 所以获取到的值为 null
         console.log(qq)

        // 3. 删除一条   window.localStorage.removeItem(key)
         window.localStorage.removeItem('qq1')

        // 4. 清空
         window.localStorage.clear()

临时存储（sessionstorage）

// sessionStorage
        // 1. 增        window.sessionStorage.setItem(key, value)
        window.sessionStorage.setItem('wx1', 'QF001')
        window.sessionStorage.setItem('wx2', 'QF002')
        window.sessionStorage.setItem('wx3', 'QF003')

        // 2. 查
         var wx = window.sessionStorage.getItem('wx')
         console.log(wx)
         var phoneNum = window.sessionStorage.getItem('pNum')    // 因为没有对应的 key, 所以获取到的值为 null
         console.log(phoneNum)

        // 3. 删除一条
        window.sessionStorage.removeItem('wx3')

        // 4. 清空
         window.sessionStorage.clear()

cookin

    // 1. 设置 cookie
         document.cookie = 'QQ=123456'

        /**
         *  2. 设置一条带有过期时间的 cookie 
         *      cookie 在设置的时候, 会按照世界标准时间设置
         * 
         *      我们的时区为东八区
        */
         var timer = new Date()
         document.cookie = 'QQ=123456;expires=' + timer

        /**
         *  3. 设置一个 3秒 后过期的 cookie
         * 
         *      因为我们所在的东八区, 比世界标准时间快了 8小时
         * 
         *      所以我们想要设置一个 3秒后过期的 cookie 必须将时间往前调整8小时, 然后加上过期时间
        */
        var timer = new Date()

        timer.setTime(timer.getTime() - 1000 * 60 * 60 * 8 + 1000 * 3)
        
        document.cookie = 'QQ=123456;expires=' + timer

        document.cookie = 'WX1=654321'
        document.cookie = 'WX2=qwerty'

        // 4. 获取 cookie
        setTimeout(function () {
            console.log(document.cookie)
        }, 5000)