美文网首页
localstorage实现缓存密码

localstorage实现缓存密码

作者: zsyyyyy | 来源:发表于2019-06-06 23:53 被阅读0次
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div class="web">
                <ul class="login">
                    <li>
                        <span>用户名:</span>
                        <input type="text" />
                    </li>
                    <li>
                        <span>密码:</span>
                        <input type="password" />
                    </li>
                    <li>
                        <label>
                                <input type="checkbox" class="remember" />
                                <span class="rPw">记住密码</span>
                        </label>
                        <button class="loginBtn">登录</button>
                    </li>
                </ul>
            </div>
            <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
            <script type="text/javascript">
                let loginBtn = $(".loginBtn");
                let ipt = $(".login input");
                loginBtn.on("click", () => {
                    //prop设置或者获取选中对象的属性
                                 //原生获取属性 .getAttribute("属性")
                    if($(".remember").prop("checked")){
                        //储存账户密码
                        localStorage.setItem("user", ipt[0].value);
                        localStorage.setItem("password", ipt[1].value);
                    }
                })
                ipt[0].value = localStorage.getItem("user");
                ipt[1].value = localStorage.getItem("password");
            </script>
        </body>
    </html>

    相关文章

      网友评论

          本文标题:localstorage实现缓存密码

          本文链接:https://www.haomeiwen.com/subject/dsvpxctx.html