很多网站登录或则注册时,都会做一个利用手机号获取验证码证明为本人操作的选项。当然为了网站的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
- localStorage cookie 网站localstorage cookie网站 sessionstorage localstorage cookie sessionstorage localstorage router cookie sessionstorage localstorage session cookie sessionstorage localstorage cookies vue seesionstorage localstorage cookies sessionstorage localstorage cookies localstorage注意事项 事项cookie sessionstorage localstorage网站 拷贝 前端sessionstorage localstorage cookies