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 相关文章推荐
DIV菜单层实现代码
Nov 19 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
JavaScript对内存分配及管理机制详细解析
Nov 11 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
基于jquery的手风琴图片展示效果实现方法
Dec 16 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 Javascript
js实现登录时记住密码的方法分析
Apr 05 Javascript
js里面的变量范围分享
Jul 18 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
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
PHP中常用的魔术方法
2017/04/28 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
如何使用angularJs
2017/05/08 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
go和python变量赋值遇到的一个问题
2017/08/31 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
八一建军节部队活动方案
2014/02/04 职场文书
心理健康课教学反思
2014/02/13 职场文书
小学校长开学致辞
2015/07/29 职场文书
python实现黄金分割法的示例代码
2021/04/28 Python
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang