JS记住用户名密码

这个需求不难，重要的点就是如何保持选中”记住用户名“的状态，并且在不重复点击的情况下修改cookie的值，我选择了在提交的时候去修改。

但还有一个问题是，我输入了用户名密码，点击”记住（选中）“，然后又修改了用户名密码，点击”记住（未选中）“，它会将我第一次保存的用户名密码都清空。

这其实这是一个需求问题，要思考一下。

这里只放了需要操作的节点的html代码，来更好和js匹配

<ul class="login-list">
    <li class="login-list-item">
        <input id="username" value="" name="username"  onkeyup="this.value=this.value.replace(/[, ]/g,'')" placeholder="请输入您的账号"  type="text"
               required="true"/>
    </li>
    <li class="login-list-item">
        <input id="password" value="" name="password" placeholder="请输入密码" type="password"
               required="true"/>
    </li>
    <li class="login-list-item-btn" style="margin: 0 30px 30px 30px;">
        <div id="remeberUser"><img id="picts" src="${ctxStatic}/images/bg-noSelect.png" alt=""/>记住用户名</div>
        <span><a href="###" target="_self" onclick="findPsd()" >找回密码</a></span>

    </li>
    <li class="login-list-item-btn">
        <button type="button" onclick="register()" id="register_button" >用户注册</button>
        <button type="button"id="login_button" class="login-button">立即登录</button>
    </li>
</ul>

// 获取图片dom
var picts = document.getElementById("picts");
// 获取用户名输入框dom
var userName = document.getElementById("username")
// 获取密码dom
var pwd = document.getElementById("password")
// 获取是否为记住用户名的状态
var selectFlag = getCookie('selectflag')

// 判断是否记住用户名
if(selectFlag == 'true'){
    picts.setAttribute("src","${ctxStatic}/images/bg-select.png");
}else{
    picts.setAttribute("src","${ctxStatic}/images/bg-noSelect.png");
}

//初始化用户名密码
userName.value = getCookie('username') != null ? getCookie('username') : '';
pwd.value = getCookie('pwd') != null ? getCookie('pwd') : '';

// 用户名密码存储
$("#remeberUser").click(function(){
    if(picts.getAttribute("src",2) == "${ctxStatic}/images/bg-noSelect.png"){
        picts.setAttribute("src","${ctxStatic}/images/bg-select.png");
        document.cookie="username="+userName.value;
        document.cookie="pwd="+pwd.value;
        document.cookie="selectflag=true";
    }else{
        picts.setAttribute("src","${ctxStatic}/images/bg-noSelect.png");
        document.cookie="selectflag=false";
        delCookie('username')
        delCookie('pwd')
    };
});
// 获取cookie
function getCookie(name)
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if( arr = document.cookie.match(reg) )
        return unescape(arr[2]);
    else
        return null;
}
// 删除cookie
function delCookie(name)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = getCookie(name);
    if(cval!=null){
        document.cookie= name + "="+cval+";expires="+exp.toGMTString();
    }

}

// 登录的点击事件，
// 判断是否为记住用户名，true的时候，点击提交修改cookie的值
$("#login_button").click(function () {
    if( selectFlag == 'true' ) {
        document.cookie="username="+userName.value;
        document.cookie="pwd="+pwd.value;
    } 
    login();
});