很多网站登录或则注册时，都会做一个利用手机号获取验证码证明为本人操作的选项。当然为了网站的web网站安全和防止信息炸弹等恶意操作，都会对再次获取验证码做一个倒计时，一般都为60s。而正常情况下只需利用JS定时函数很容易实现，这种情况下用户一旦刷新页面，页面dom中我们定义的js变量都会初始化，造成倒计时中断，而且未等倒计时结束又能发送短信。
上面的那种清空就涉及到数据持久性的问题，当然关于解决数据持久性的方案很多，例如常见的将数据存储到常规数据库，缓存数据库，session,cooike,localStorage,本地文本文件中等等。既然涉及JS前端，而cookie和localStorage又是JS的内置存储数据对象，所以对于上面的情况利用这两个方案分别实现一次
思路：
1.将倒计时的 总时间*1000+当前系统时间戳 存储到cookie或者localStorage中
2.当页面刷新，或重加载时如果cookie或者localStorage存在读取其中存储的值
3.利用当（前时间戳-读取的时间戳）/1000 等于剩余计时 秒数
缺点：当倒计时未结束时，用户手动删除了页面对应的cookie或者本地localStorage值时，再重新刷新页面
还是能够发送短信验证码。[不过对于这种情况，在调用后台接口时应该做二次验证，具体方案自行考究]
实现代码如下：
1.cookie实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>COOKIE实现页面倒计时刷新页面无影响</title>
</head>
<style>
#tip{
width:125px;
height:25px;
}
</style>
<body>
<div><button id='tip'">获取验证码</button></div>
</body>
<script type="text/javascript">
window.onload = function(){
var tip = document.getElementById('tip');
let ct = getCookie("codeTime");
if(ct && ct !="" && ct !=null){
tip.disabled = "true";
let d = new Date();
//用(设置的cookie时间戳-系统当前时间)/1000=剩余时间秒数
let sec = Math.round((ct-d.getTime())/1000);
countDown(tip,sec);
}
}
tip.onclick = function(){
let t = 60;
setCookie('codeTime',t,t);
countDown(tip,t);
}
//设置cookie,直接将失效时间设置为cookie的值
//将倒计时的秒数+当前时间戳设置为cookie值和cookie的有效时间
function setCookie(name,value,time){
let exp = new Date();
let val = exp.getTime()+value*1000;
exp.setTime(exp.getTime()+time*1000);
document.cookie = name+'='+val+';expires='+exp.toGMTString();
}
/**
* @param name [string] 要获取cookie名
* @return 如果存在则返回cookie的值，否则返回空
*/
function getCookie(name){
//获取所有cookie并且以';'为分割符，分割为数组
let cook = document.cookie.split(';');
//用indexOf()函数需要判断name第一次存在分割字符串的
//0位置需要拼接一个=，这样遍历时更精确
let cname = name+'=';
let len = cook.length;
//循环数组
for(let i=0;i<len;i++){
let ck = cook[i].trim();
//
if(ck.indexOf(cname)==0){
return (ck.split('=')[1]).trim();
//return ck.substring(cname.length,ck.length)
}
}
return '';
}
//倒计时
function countDown(obj,num) {
var tim = setInterval(function() {
num--;
obj.disabled = "true";
obj.innerHTML= num+'秒后失效';
if(num <= 0 ) {
clearInterval(tim);
obj.disabled = "";
obj.innerHTML= '重新发送';
}
}, 1000) //每1000毫秒=1秒执行一次
}
</script>
</html>
2.localStorage实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage实现页面倒计时刷新页面无影响</title>
</head>
<style>
#tip{
width:125px;
height:25px;
}
</style>
<body>
<div><button id='tip'">获取验证码</button></div>
</body>
<script type="text/javascript">
/**
* 将倒计时总时间*1000+当前时间戳存入到客户端本地内存中 localStorage
*/
window.onload = function(){
var tip = document.getElementById('tip');
if(get('codetime')){
let ct = get('codetime');
let num = Math.round((ct-new Date())/1000);
if(num>0){
tip.disabled = "true";
countDown(tip,num);
}
}
}
tip.onclick = function(){
let t = 60;
let st = new Date().getTime()+t*1000;
set('codetime',st);
countDown(tip,t);
}
//localStorage数据存取
function set(name,val){
localStorage.setItem(name, JSON.stringify(val));
}
//localStorage获取
function get(name){
return JSON.parse(localStorage.getItem(name));
}
//倒计时
function countDown(obj,num) {
var tim = setInterval(function() {
num--;
obj.disabled = "true";
obj.innerHTML= num+'秒后失效';
if(num <= 0 ) {
clearInterval(tim);
obj.disabled = "";
obj.innerHTML= '重新发送';
}
}, 1000) //每1000毫秒=1秒执行一次
}
</script>
</html>
————————————————
版权声明：本文为CSDN博主「愤怒的多啦A梦」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lk1848621002/article/details/103191108