WEB小案例之JS实现验证码倒计时页面刷新或关闭，倒计时正常递减无影响

很多网站登录或则注册时，都会做一个利用手机号获取验证码证明为本人操作的选项。当然为了网站的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实现

    
    



    
获取验证码
    

2.localStorage实现 

    
    





    
获取验证码