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 相关文章推荐
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 Javascript
java和js实现的洗牌小程序
Sep 30 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
Banner程序
2006/10/09 PHP
php smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
PHP中overload与override的区别
2017/02/13 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
jquery.ui.draggable中文文档
2009/11/24 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
python读取中文txt文本的方法
2018/04/12 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
python图像处理入门(一)
2019/04/04 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
毕业自我评价
2014/02/05 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
社区义诊活动总结
2014/04/30 职场文书
初中家长意见
2015/06/03 职场文书
收入证明范本
2015/06/12 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
协议书格式模板
2016/03/24 职场文书
七年级作文之秋游
2019/10/21 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python