实现记住密码功能

最新推荐文章于 2024-04-27 06:46:18 发布

LxyingINGing

最新推荐文章于 2024-04-27 06:46:18 发布

阅读量507

点赞数 8

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/LxyingINGing/article/details/134841750

版权

效果：

填写表单后，点击”记住密码“复选框，则表单填写的数据会自动保存在本地存储中，刷新页面或关闭页面后数据不会消失，下次打开页面时，数据自动填写在表单中。

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            font-size:12px;
        }
    </style>
</head>
<body>
    <input  type="text" id="txtName" placeholder="请输入用户名"/>
    <br>
    <input  type="password" id="txtPwd" placeholder="请输入密码"/>
    <br>
    <input  type="checkbox" id="ckb"/><span>记住密码</span>
    <script>
        var txtName=document.querySelector('#txtName');
        //console.log(txtName);
        var txtPwd=document.querySelector('#txtPwd');
        //console.log(txtPwd);
        var ckb=document.querySelector('#ckb');
        ckb.onchange=function(){
            if(this.checked){
                localStorage.setItem('txtName',txtName.value);
                localStorage.setItem('txtPwd',txtPwd.value);  
            }else{
                localStorage.removeItem('txtName');
                txtName.value='';
                localStorage.removeItem('txtPwd');
                txtPwd.value=''; 
            }        
        }
        var saveName=localStorage.getItem('txtName');
            var savePwd=localStorage.getItem('txtPwd');
            // console.log(v);
            if(saveName&&savePwd){
               txtName.value=saveName;
               ckb.checked=true;
               txtPwd.value=savePwd;
               ckb.checked=true;
            }else{
               txtName.value='';
               ckb.checked=false;
               txtPwd.value='';
               ckb.checked=false;
            }
            // if(savePwd){
            //    txtPwd.value=savePwd;
            //    ckb.checked=true;
            // }else{
            //    txtPwd.value='';
            //    ckb.checked=false;
            // }

    </script>
</body>
</html>

效果图如下所示：