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 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
May 10 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
PHP Stream_*系列函数
2010/08/01 PHP
一个简单php扩展介绍与开发教程
2010/08/19 PHP
php通用防注入程序 推荐
2011/02/26 PHP
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
javascript操作JSON的要领总结
2012/12/09 Javascript
javascript中常用编程知识
2013/04/08 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
Node.js模块加载详解
2014/08/16 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
python中类的一些方法分析
2014/09/25 Python
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
python编写爬虫小程序
2015/05/14 Python
Python的缺点和劣势分析
2019/11/19 Python
python如何进入交互模式
2020/07/06 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
体育教师工作总结的自我评价
2013/10/10 职场文书
成教自我鉴定
2013/10/27 职场文书
教师找工作推荐信
2013/11/23 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
社保转移委托书范本
2014/10/08 职场文书
2015年学校党建工作总结
2015/05/19 职场文书