巧用LocalStorage防刷新登陆失败倒计时

开发工具与关键技术：Visual Studio 2015、C#、JavaScript
作者： 饶芝华 ；年级：2017；撰写时间：2019年02月 20日

通常我们偶尔会忘记手机锁屏密码或者网站登陆密码，而假如输入的密码错误次数过多系统就会提示我们**秒后再尝试解锁。因此我在做项目的时候也想到过能不能也实现一个这样的功能，结果是一刷新倒计时就没了，后来发现LocalStorage这东西 有一个特性，它没有时间限制的web存储。所以就想到它可以用来解决这个问题！
代码：

var Storage = window.localStorage;// 创建对象
  $(function () {
     if (Storage.BtnState == "false") {//登陆错误等待中……
            contrleBtn();//继续显示倒计时
        }
    })
    
$('#submit').click(function (event) {
	var UserName = $('#UserName').val().trim();
	var PassWord = $('#PassWord').val().trim();
	var Valide = $("#Valide").val().trim();
	$.post('/Main/LoginChecking', { strName: UserName, strPassword: PassWord, Valide: Valide }, function (data) {
		if(data=="success"){
			Storage.Seconds = 0;
		}
		else{
		alert(data.Text);
		if (Number(Storage.clickCount) >= 10) {
			layer.msg("糟糕，密码错误次数超标，请联系系统管理员为您处理！");
		} else {
				if (data.Text == "验证码错误！" || data.Text == "用户错误！") {
				  return false;
				}
				 else
				 {
					if (Storage.clickCount) {//记录点击登陆次数
					      Storage.clickCount = Number(Storage.clickCount) + 1;
					  } else {
					      Storage.clickCount = 1;
					  }
					  //超过3次密码错误
					if (Number(Storage.clickCount) > =3) {
					      layer.msg("您还有" + (10 - Number(Storage.clickCount)) + "次尝试登陆机会，请慎重填写！");
					      Storage.BtnState = false;//记录登陆按钮状态
					      Storage.Seconds = Number(Storage.clickCount) * 10;//总秒数算法
					      contrleBtn();//登陆按钮失效
					      addErroInfor();//后台添加错误日志
					  }
					}
				}
			}
		});
	}
	function addErroInfor() {
		$.post("LoginReport", { UserName: UserName, PassWord: PassWord, OpreationID: 2 }, function (state) {
			if (state == "success") {
				layer.msg("已通知后台");
			}
		});
	}
});
function contrleBtn() {
   $("#submit").attr("disabled", "disabled");//禁用登陆按钮
     time = setInterval(function () { Outtime();}, 1000);
 }
 //显示倒计时
function Outtime() {
   if (Number(Storage.Seconds) > -1) {
       $("#timee").html("还剩" + Storage.Seconds + "秒，进行下一次登陆");
       if (Number(Storage.Seconds) == 0) {
           Storage.BtnState = true;//恢复按钮使用状态
           Storage.Seconds = 0;//清空时间记录
           $("#timee").html("");//清楚时间显示
           $("#submit").attr("disabled", false);//恢复登陆按钮
       }
       Storage.Seconds = Number(Storage.Seconds) - 1;
   } else {
       clearInterval(time);//清空计时器
   }
}

debug截图：

登陆页面被锁：

这样，用户在3次密码错误时候就要等若干秒才能再次尝试登陆，一旦超过十次密码错误，可以自动注销该账号，只能找系统管理员去解封。
注意：这只是防止刷新丢失倒计时的时间值，因为它是存储在web浏览器所以一旦清楚浏览数据就会被销毁。

如果有更好的代码，希望您能够在评论区分享一下，谢谢！