本地存储 localStorage和sessionStorage JSON字符串

最新推荐文章于 2024-08-12 15:52:31 发布

正在画图的小瓶盖

最新推荐文章于 2024-08-12 15:52:31 发布

阅读量613

点赞数 4

文章标签： json linq vue.js

本文链接：https://blog.youkuaiyun.com/sdybz11zr/article/details/124755482

版权

本文详细讲解了window.localStorage与window.sessionStorage的区别，包括生命周期、共享特点和操作方法，重点展示了如何在JavaScript中使用它们来存储、获取和管理数据.

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

window.localStorage

1、声明周期永久生效，除非手动删除否则关闭页面也会存在

2、可以多窗口（页面）共享（同一浏览器可以共享）

3. 以键值对的形式存储使用

设置：localStorage.setItem(key, value) 注意key和value要以字符串的形式书写

例如 localStorage.setItem('obj', '{"uname":"小瓶盖"}')

 // 设置：localStorage.setItem(key, value)
        set.addEventListener('click', function () {
            localStorage.setItem('ipt', ipt.value);
            localStorage.setItem('obj', '{"uname":"小瓶盖"}')

        })
        
        // 取值：localStorage.getItem(key)
        get.addEventListener('click', function () {
            localStorage.getItem('ipt');
            console.log(localStorage.getItem('ipt'))
            var str = localStorage.getItem('obj');
            console.log(str);
            console.log(JSON.parse(str).uname)
        })

         // 删除：localStorage.removeItem(key)
        remove.addEventListener('click', function () {
            localStorage.removeItem('ipt');
        })

        // 清除：localStorage.clear()
        del.addEventListener('click', function () {
            localStorage.clear();
        })

window.sessionStorage

1、生命周期为关闭浏览器窗口

2、在同一个窗口(页面)下数据可以共享

3、以键值对的形式存储使用

<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        // sessionStorage
        // 生命周期为关闭浏览器窗口
        // 在同一个窗口(页面)下数据可以共享
        // 以键值对的形式存储使用

        var btns = document.querySelectorAll('button')
        var input = document.querySelector('input')
        // 设置：sessionStorage.setItem(key, value)
        btns[0].addEventListener('click', function () {
            sessionStorage.setItem('uname', '{"uname":"小瓶盖"}')
            var inputValue = input.value;
            sessionStorage.setItem('inputValue', inputValue)
        })
        // 取值：sessionStorage.getItem(key)
        btns[1].addEventListener('click', function () {
            console.log(sessionStorage.getItem('uname'))
            var arr = []
            arr[0] = JSON.parse(sessionStorage.getItem('uname'))
            console.log(arr[0])
            console.log(arr[0]['uname'])
        })
        // 删除：sessionStorage.removeItem(key)
        btns[2].addEventListener('click', function () {
            sessionStorage.removeItem('uname')
        })
        // 清除：sessionStorage.clear()
        btns[3].addEventListener('click', function () {
            sessionStorage.clear('uname')
        })

    </script>
</body>

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串

JSON.parse('json字符串'); => 转换成对象或者数组

JSON.stringify(对象或者数组); => 转换成 json字符串

案例：在浏览器重新刷新时只要上次勾上了记住用户名框就会input显示上次输入的用户名

<body>
    <input type="text" id="username"> 
    <input type="checkbox" name="" id="remember"> 记住用户名
    <script>
        // 如果勾选记住用户名， 下次用户打开浏览器，就在文本框里面自动显示上次登录的用户名
        // 1. 如果勾选，就存储，否则就移除, localStorage
        // 2. 打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框
        // 3. 当复选框发生改变的时候change事件
        //1.监听复选框 change 事件
        var remember = document.querySelector('#remember');
        var username = document.querySelector('#username')
        remember.addEventListener('change', function () {
            console.log(this.checked);
            if (this.checked) {
                localStorage.setItem('uname', username.value);
            } else {
                localStorage.removeItem('uname')
            }

        })
        var usernameValue = localStorage.getItem('uname');
        if (usernameValue) {
            username.value = usernameValue;
            remember.checked = true;
        }
        //如果输入框里面的值改变了  则修改
        username.addEventListener('change', function () {
            if (username.value !== localStorage.getItem('uname')) {
                console.log('dfgh')
                localStorage.setItem('uname', username.value);
            }
        })

    </script>
</body>