localStorage 记住密码

首先来看一下基本操作

• 1.创建缓存
  localStorage.setItem('name', name);

• 2.读取缓存
  localStorage.getItem('name', this.name);

• 3.清除所有缓存
  localStorage.clear();

• 4 清楚指定缓存
  localStorage.removeItem('name');

已经了解了基本操作，接下来我们进行简单的记住密码功能实操吧

页面如下

HTML代码

 <div class="col-sm-8 col-sm-offset-2">
                <form id="signupForm" autocomplete="off">
                    <input type="text"     name="username" class="form-control uname"     placeholder="用户名"  />
                    <input type="password" name="password" class="form-control pword"     placeholder="密码"   />
					<div class="row m-t" th:if="${captchaEnabled==true}">
						<div class="col-xs-6">
						    <input type="text" name="validateCode" class="form-control code" placeholder="验证码" maxlength="5" />
						</div>
						<div class="col-xs-6">
							<a href="javascript:void(0);" title="点击更换验证码">
								<img th:src="@{captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>
							</a>
						</div>
					</div>
                    <div class="checkbox-custom" th:classappend="${captchaEnabled==false} ? 'm-t'">
				        <input type="checkbox" id="rememberme" name="rememberme"> <label for="rememberme">记住我</label>
				    </div>

                    <button class="btn btn-success btn-block" id="btnSubmit" data-loading="正在验证登录，请稍后..." onclick="loginBtn_click()">登录</button>
                </form>
            </div>

JS代码

<script th:inline="javascript">

    //一加载页面就运行
    window.onload = function () {
            var strName = localStorage.getItem('keyName');
            var strPass = localStorage.getItem('keyPass');
            if (strName) {
                $(" input[ name='username' ] ").val(strName);
            }
            if (strPass) {
                $(" input[ name='password' ] ").val(strPass);
            }
        };

       //当点击确定按钮时执行，如果选中了记住我，则记住账号和密码，否则删除原来的密码并不记住这次的密码
        function loginBtn_click() {
                var strName = $(" input[ name='username' ] ").val();
                var strPass = $(" input[ name='password' ] ").val();
                localStorage.setItem('keyName', strName);
                if (document.getElementById("rememberme").checked) {
                    localStorage.setItem('keyPass', strPass);
                } else {
                    localStorage.removeItem('keyPass');
                }
                //做一个延时任务，登录一周后就清理一下，就不会永久保存账号和密码了
                setTimeout(function a() {
                    localStorage.clear();
                },604800);

        }
 </script>