localstorage本地存储之“记住密码”

在没遇到这个问题之前，茫茫然不知所措，当遇到了之后，你会感觉很简单，好了，废话不多说，直接上代码！

HTML：

<div>
    <h3>Log in</h3>
    <input type="text" name="user" placeholder="user" id="user" class="idText">
    <input type="password" name="pass" placeholder="password" id="pass">
    <input type="checkbox" class="remember" checked><br/><br/>
    <input type="button" value="登录" id="sub" onclick="loginBtn_click()">
</div>

样式的话就不用我写了吧，没必要，下面来说下js(我用的jquery写的）

JS

$(function ( ) {

    //一进来就检测本地存储，如果有的话，显示在账号、密码栏中       
    var strName = localStorage.getItem('UserName');
    var strPass = localStorage.getItem('UserPass');
    if(strName) {
        $('.idText').val(strName);
    }
    if(strPass) {
        $('.password').val(strPass);
    }
})

//登录方法
function loginBtn_click() {

    //点击登录，先提交账号密码给后台   
    $.post("{:U('Login/act_login')}", {"phone":phone.value,"password":password.value,"remember":remember.value},function(data){
        var obj = JSON.parse(data);

        //当登录成功的时候，点击登录按钮，先把账号和密码都存储进去
        if(obj.status == 200){          
            var strName = $('.idText').val();
            var strPass = $('.password').val();
            localStorage.setItem('UserName', strName);

            //如果勾选了“记住密码”，则把密码存储进去
            if($('.remember').is(':checked')) {
                localStorage.setItem('UserPass', strPass);
            //否则，就把密码这个键值对删除
            } else {
                localStorage.removeItem('UserPass');
            //然后跳转到首页
            window.location.href="{:U('Index/index')}";
        }else if (obj.status == 2) {
            $(".tips").first().text('该账号未注册')
        }else if (obj.status == 24) {
            $(".tips").first().text('请检查您的账号或密码')
        }           
        else{
            $('.idText').next().text(obj.info);
        }
    })  
}

tips：
1、页面加载的时候查找本地存储，然后给账号和密码赋值。
2、在提交账号、密码之后，返回值确认登录成功之后再执行本地存储。

作者结语：小伙伴们，是不是很简单呢？有木有学到呢？嘻嘻