JS实现记住用户名-CSDN博客

本文链接：https://blog.csdn.net/w645444407/article/details/80772898

本文参考https://www.cnblogs.com/zoie-blog/p/6905467.html一文写出

代码中的js部分基本上是参考的该博主的，仅将保存用户名部分放入了

$("#remember").change(function(){

｝

中，这样才能实现点击记录

<html>
<body>
<img src="${ctx}/assets/admin/login/img/banner_textfree.jpg" alt="">
<div class="loginBox">
    <div class="loginBox_h">登录</div>
    <div class="c-red loginTip"></div>
    <div class="iptbox">
        <div id="login_content">
            <form id="login-form" action="login.html" method="post">
                <div class="login_ipt userName">
                    <input type="text" placeholder="请输入渠道编号" id="username" value="${username!}"
                           name="username" autocomplete="off">
                </div>
                <div class="login_ipt passWord">
                    <input type="hidden" name="md5password" id="md5password" value=""><!--这个放在账号和密码之间，让浏览器不会自动记住密码-->
                    <input type="password" placeholder="请输入密码" id="password" name="password" autocomplete="off"
                           value="">
                </div>
                <div class="login_text">
                    <input class="code text" name="verifyCode" id="verifyCode" type="text" maxlength="8" size="8"
                           autocomplete="off" placeholder="验证码" value=""
                           style="width:65%;height:35px;border:1px solid #ddd;padding-left:12px;">
                    <span><img src="admin/verifyCode/getCode.html" alt="点击刷新" title="点击刷新" class="veryfy_img"
                               width="77" height="30" id="verifyImage"></span>
                </div>
                <div class="mb-15 mt-15">
                    <input type="checkbox" id="remember"><label for="remember" class="login_label">记住登录名</label>
                </div>
                <div class="login_bar">
                    <button id="btn-login" type="button" class="sub"
                            style="width:100%; height:42px; font-size:16px; background:#2483c6; border:none; color:#fff; margin-top:15px;">
                        登 录
                    </button>
                    <label id="errorMessage" class="form-group has-error" style="width: 210px;">${message!}</label>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    //判断是否存在过用户
    console.log("载入用户名");
    var storage = window.localStorage;
    if("yes" == storage["isstorename"]){
        $("#remember").attr("checked", true);
        $("#username").val(storage["username"]);
    }
</script>
<script type="text/javascript">
    //判断是否保存用户名
    var storage = window.localStorage;
    $("#remember").change(function(){
        if ($("#remember").is(':checked')) {
            //存储到loaclStage
            storage["username"] = $("#username").val();
            storage["isstorename"] = "yes";
            console.log("保存用户名");
        } else {
            storage["username"] = "";
            storage["isstorename"] = "no";
            console.log("未保存用户名");
        }
    });
</script>
</body>
</html>