js 使用localStorage本地存储用户名、密码

效果图如下：

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
        #check{
            width: 15px;
            height: 15px;
        }
    </style>
    <body>
        <span>用户名：</span>
        <input id="uname" />
        <span>密码</span>
        <input type="password" id="psw" />
        <br>
        <br>
        <input type="checkbox" id="check" />
        <span>存储用户名、密码到本地</span>
    </body>
    <script>
        var uname = document.querySelector("#uname");
        var psw = document.querySelector("#psw");
        var check = document.querySelector("#check");
        
        uname.addEventListener("change",()=>{
            if(!localStorage.getItem(uname.value)){
                check.checked = false;
            }
        })
        check.addEventListener("change",()=>{
            if(check.checked){
                //选中，记住账号名和密码
                localStorage.setItem(uname.value, psw.value);
                console.log(localStorage.getItem(uname.value));
            }
        })
    </script>
</html>

 

posted @ 2021-12-02 15:38  sunshine233  阅读(484)  评论(0)  编辑  收藏  举报