HTML5 web Storage存储-localStorage 与 sessionStorage 案例记录用户名密码

最新推荐文章于 2025-04-30 11:39:13 发布

哎哟嘿

最新推荐文章于 2025-04-30 11:39:13 发布

阅读量892

点赞数

分类专栏： HTML5 web存储

本文链接：https://blog.youkuaiyun.com/d295968572/article/details/79699372

版权

web存储同时被 2 个专栏收录

3 篇文章

订阅专栏

HTML5

2 篇文章

订阅专栏

本文详细介绍了HTML5的Web Storage特性，特别是localStorage和sessionStorage的应用。通过实例展示了如何利用它们来持久化存储用户的用户名和密码，提供更好的用户体验。同时，提到了.clear()方法用于清空所有存储的数据。

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

1. storage的特性：
        a) 设置、读取方便；容量较大；
        b) 只能存储字符串，可以将对象JSON.stringify()编码后存储
2. localStorage.getItem()
        a) 20M 永久本地存储需要手动删除，
        b) 可以多个窗口共享
3. sessionStorage.getItem()
        a) 5M 关闭浏览器就会删除数据,
        b) 在同一个窗口下数据可以共享
4. 方法对象：
        a) *.setItem(key,value) 存储数据、
        b) *.getItem(key) 获取数据、
        c) *.removeItem(key) 删除数据

d) *.clear() 清空所有数据

记录用户名与密码


<label>用户名：<input type="text" class="userName"></label><br>
<label>密&nbsp;&nbsp;&nbsp;码：<input type="password" class="pwd"></label><br>
<!--<label><input type="checkbox" class="check" checked>记住密码</label><br>-->
<label><input type="checkbox" class="check">记住密码</label><br>
<button>登录</button>

<script>
    (function(){
        var userName=document.querySelector('.userName');
        var pwd=document.querySelector('.pwd');
        var check=document.querySelector('.check');
        var aBtn=document.querySelector('button');

        aBtn.addEventListener('click',function(){
            if(check.checked){
                window.localStorage.setItem('userName',userName.value);
                window.localStorage.setItem('pwd',pwd.value);
            }else{
                window.localStorage.removeItem('userName');
                window.localStorage.removeItem('pwd');
            }
        });
        // 下次登录时，如果记录的有数据就直接填充
        window.onload=function(){
            userName.value=window.localStorage.getItem('userName');
            pwd.value=window.localStorage.getItem('pwd');
        }

    })();
</script>