web浏览器利用本地储存实现记住用户名

以你之姓@ 2022-04-23 11:34 182阅读 0赞

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script>
                window.onload=function(){
                    /*页面打开，判断是否存储过用户名---*/
                    var uName=window.localStorage.getItem('userName');
                    var password=window.localStorage.getItem('password');
                    console.log(uName)
                    if(password != null){//说明之前存储过值，说明用户希望记住用户名
                        document.getElementById('password').value=password;       
                    }
                    if(uName != null){//说明之前存储过值，说明用户希望记住用户名
                        document.getElementById('userName').value=uName;       
                    }
                    /*点击登录时存储数据*/
                    document.getElementById("submit").onclick=function(){
                        var name=document.getElementById('userName').value;
                        var pass=document.getElementById('password').value;
                        /*判断用户是否选择记住用户名*/
                        var isRemenber=document.getElementById('isRemenber');
                        if(isRemenber.checked==true){
                            /*存储数据到localstorage*/
                            window.localStorage.setItem('userName',name);
                            window.localStorage.setItem('password',pass);
                        }
                        else{
                            window.localStorage.removeItem('userName');
                            window.localStorage.removeItem('password');
                        }
                    }
                }
            </script>
        </head>
        <body>
            <form action="#">
                <input type="userName" id="userName"/>
                <input type="password" id="password"/>
                <input type="checkbox" id="isRemenber" />
                <input type="submit" value="submit" id="submit"/>
            </form>
        </body>
    </html>