H5 WEB存储实现——登陆时记住用户名或密码

最新推荐文章于 2024-12-20 11:10:35 发布

jtzzz

最新推荐文章于 2024-12-20 11:10:35 发布

阅读量5.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： H5

本文链接：https://blog.youkuaiyun.com/jt18729260336/article/details/84068979

H5 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用HTML5的localStorage和sessionStorage来实现登录时记住用户名的功能。主要区别在于sessionStorage仅在当前页面关闭后消失，而localStorage则永久保存直到手动删除。通过window.localStorage.setItem()、getItem()和removeItem()等API，可以方便地进行数据的存取和删除。为了实现记住用户名，应选择localStorage进行存储。

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

此处用保存用户名为例，因为我们在外登陆时保存用户名居多。

此处需用到localStorage和sessionStorage两种存储方式。

sessionStorage

大小 5M
生命周期 -- 关闭当前页面就消失
活动范围 -- 当前页面
存储位置 -- 当前页面的内存中
API
- 设置- window.sessionStorage.setItem(k,v) --k是属性名，v是属性值，以下相同。
- 获取 - window.sessionStorage.getItem(k)
- 删除 - window.sessionStorage.removeItem(k)

localStorage

大小 - 20M
生命周期 - 永久生效除非手动删除
活动范围 - 当前浏览器
存储位置 - 硬盘
API
- 设置- window.localStorage.setItem(k,v)
- 获取 - window.localStorage.getItem(k)
- 删除 - window.localStorage.removeItem(k)
- 清空 - window.localStorage.clear()

了解了这种方式，所以我们应该知道，要记住用户名，应该使用localStorage，以下代码为具体实现。

 window.onload=function(){
        /*页面打开，判断是否存储过用户名---*/
        var uName=window.localStorage.getItem('userName');
        if(uName != null){//说明之前存储过值，说明用户希望记住用户名
            document.getElementById('userName').value=uName;       
        }
        /*点击登录时存储数据*/
        document.getElementById("submit").onclick=function(){
            var name=document.getElementById('userName').value;
            /*判断用户是否选择记住用户名*/
            var isRemenber=document.getElementById('isRemenber');
            if(isRemenber.checked==true){
                /*存储数据到localstorage*/
                window.localStorage.setItem('userName',name);
            }
            else{
                window.localStorage.removeItem('userName');
            }
        }
    }