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 相关文章推荐
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
JS中如何设置readOnly的值
Dec 25 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
Angular2  NgModule 模块详解
Oct 19 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
解读Vue组件注册方式
May 15 Vue.js
详解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中$this-&amp;gt;含义分析
2009/11/29 PHP
PHP详解ASCII码对照表与字符转换
2011/12/05 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
如何在一个页面显示多个百度地图
2013/04/07 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
JS中操作JSON总结
2020/12/06 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
JS打印组合功能
2016/08/04 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
Vue.js的动态组件模板的实现
2018/11/26 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python六大开源框架对比
2015/10/19 Python
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
python给list排序的简单方法
2020/12/10 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
50道外企软件测试面试题
2014/08/18 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
物流管理专业大学生自荐信
2013/10/04 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python