vue短信验证性能优化如何写入localstorage中


Posted in Javascript onApril 25, 2018

平时我们在项目中进行注册等的时候,会经常用到短信验证的功能,但是现在现在很多短信验证都是存在下面几个问题,例如短信验证时间为60s的时候,

1. 当点击完按钮时,倒计时还没到60s过完时,刷新浏览器,验证码按钮又可以重新点击

2.当点击按钮倒计时开始,例如在50s的时候我关闭了浏览器,过了5s后,我在打开,此时时间倒计时的时间应该是45s左右,但是当重新打开浏览器的时候,按钮又可以重新点击了

为了解决上面的两个问题,就需要把时间都写到localstorage里面去,当打开页面的时候,就去localstorage里面去取,我这里就贴上我的解决方法,因为前几天有个vue的项目用到该方法,所以我这里就写个vue的方法出来吧

组件里面的html代码:

<div class="mtui-cell__ft" @click="getCode">
   <button class="mtui-vcode-btn mtui-text-center" v-if="flag">获取短信</button>
   <button class="mtui-vcode-btn mtui-text-center" v-if="!flag">剩余{{second}}s</button>
</div>

重点来啦

在data里面定义几个需要用到的变量:

second: 60,
 flag: true,
 timer: null // 该变量是用来记录定时器的,防止点击的时候触发多个setInterval

获取短信验证的方法:

getCode() {
   let that = this;
   if (that.flag) {
    that.flag = false;
    let interval = window.setInterval(function() {
     that.setStorage(that.second);
     if (that.second-- <= 0) {
      that.second = 60;
      that.flag = true;
      window.clearInterval(interval);
     }
    }, 1000);
   }
  }

写入和读取localstorage:

 setStorage(parm) {
   localStorage.setItem("dalay", parm);
   localStorage.setItem("_time", new Date().getTime());
  },
  getStorage() {
   let localDelay = {};
   localDelay.delay = localStorage.getItem("dalay");
   localDelay.sec = localStorage.getItem("_time");
   return localDelay;
  }

防止页面刷新是验证码失效:

judgeCode() {
   let that = this;
   let localDelay = that.getStorage();
   let secTime = parseInt(
    (new Date().getTime() - localDelay.sec) / 1000
   );
   console.log(localDelay);
   if (secTime > localDelay.delay) {
    that.flag = true;
    console.log("已过期");
   } else {
    that.flag = false;
    let _delay = localDelay.delay - secTime;
    that.second = _delay;
    that.timer = setInterval(function() {
     if (_delay > 1) {
      _delay--;
      that.setStorage(_delay);
      that.second = _delay;
      that.flag = false;
     } else {





 







// 此处赋值时为了让浏览器打开的时候,直接就显示剩余的时间
      that.flag = true;
      window.clearInterval(that.timer);
     }
    }, 1000);
   }
  }

然后在html挂载页面完成后的生命钩子(mounted)中调用judgeCode()方法就能实现该功能了

总结

以上所述是小编给大家介绍的vue短信验证性能优化如何写入localstorage中,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
javascript 二维数组的实现与应用
Mar 16 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
vue-axios使用详解
May 10 Javascript
使用Vue自定义指令实现Select组件
May 24 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
详解Vue.js中.native修饰符
Apr 24 #Javascript
Vue 动态设置路由参数的案例分析
Apr 24 #Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 #Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 #Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 #Javascript
vue中$refs的用法及作用详解
Apr 24 #Javascript
vue实现选项卡及选项卡切换效果
Apr 24 #Javascript
You might like
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
vue slots 组件的组合/分发实例
2018/09/06 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
js判断密码强度的方法
2020/03/18 Javascript
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
各个系统下的Python解释器相关安装方法
2015/10/12 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
python验证码识别实例代码
2018/02/03 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
.NET笔试题(20个问题)
2016/02/02 面试题
历史学专业个人的自我评价
2013/10/13 职场文书
宝宝周岁宴答谢词
2014/01/26 职场文书
校运会广播稿100字
2014/01/27 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
家长意见书
2015/06/04 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android