本地存储及记住用户名案例

最新推荐文章于 2024-11-02 12:42:04 发布

步步生花@苏殿主

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量438

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/sjp991012/article/details/130382674

版权

文章目录

一、本地存储特性
二、 window.sessionStorage
三、 window.localStorage
四、案例：记住用户名

一、本地存储特性

1、数据存储在用户浏览器中
2、设置、读取方便、甚至页面刷新不丢失数据
3、容量较大，sessionStorage约5M、localStorage约20M
4、只能存储字符串，可以将对象JSON.stringify() 编码后存储

二、 window.sessionStorage

1、生命周期为关闭浏览器窗口
2、在同一个窗口(页面)下数据可以共享
3. 以键值对的形式存储使用

1、存储数据

sessionStorage.setItem(key, value)

2、获取数据

sessionStorage.getItem(key)

3、删除数据

sessionStorage.removeItem(key)

4、删除所有数据

sessionStorage.clear()

三、 window.localStorage

1、声明周期永久生效，除非手动删除 否则关闭页面也会存在
2、可以多窗口（页面）共享（同一浏览器可以共享）
3. 以键值对的形式存储使用

1、存储数据

localStorage.setItem(key, value)

2、获取数据

localStorage.getItem(key)

3、删除数据

localStorage.removeItem(key)

4、删除所有数据

localStorage.clear()

四、案例：记住用户名

<body>
    <input type="text" id="username">
    <input type="checkbox" name="" id="remember"> 记住用户名
    <script>
        var username = document.querySelector('#username');
        var remember = document.querySelector('#remember');
        // 获取本地存储是否有用户名，如果有：1、给输入框赋值，2、选中记住用户名
        if (localStorage.getItem('username')) {
            username.value = localStorage.getItem('username');
            remember.checked = true;
        }
        // 监听是否选中记住用户名
        remember.addEventListener('change', function () {
            if (this.checked) {
                // 记住用户名
                localStorage.setItem('username', username.value)
            } else {
                // 取消记住用户名
                localStorage.removeItem('username');
            }
        })
    </script>
</body>