Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现


Posted in Javascript onSeptember 04, 2020

今天我们使用本地缓存localStorage来实现页面刷新了,验证码倒计时还是和刷新时一样,而不是清零,其次我们可以使用localStorage去实现用户信息缓存,记住密码等等关于缓存的功能,在这里就简单演示一下验证码功能。

一、功能实现

话不多说,直接上代码

<template>
	<button @click="getCode()" :disabled="!show">
  <span v-show="show">发送验证码</span>
  <span v-show="!show" class="count">{{count}} s</span>
 </button>
</template>
<script>
 let TIME_COUNT = 60; // 设置一个全局的倒计时的时间
 export default {
 data() {
  return {
   show: true,
   count: '',
   timer: null,
  }
 },
 components: {
  marquee
 },
 created(){
   // 进入页面时获取倒计时中止的位置,并继续计时
   if (localStorage.regtime > 0 && localStorage.regtime <= TIME_COUNT){
    TIME_COUNT = localStorage.regtime;
    this.count = TIME_COUNT;
    this.show = false;
    this.timer = setInterval(() => {
     if (this.count > 0 && this.count <= TIME_COUNT) {
      this.count--
      localStorage.regtime = this.count;
     } else {
      this.show = true;
      clearInterval(this.timer);
      this.timer = null
     }
    }, 1000)
   }
 },
 methods: {
  getCode () {
   // 验证码倒计时
   if (!this.timer) {
    this.count = TIME_COUNT
    localStorage.regtime = this.count;
    this.show = false
    this.timer = setInterval(() => {
    if (this.count > 0 && this.count <= TIME_COUNT) {
     this.count--
     localStorage.regtime = this.count;
    } else {
     this.show = true
     clearInterval(this.timer)
     this.timer = null
    }
   }, 1000)
  }
 }
 }
</script>

二、知识拓展

1.对比cookies,sessionStorage 和 localStorage 三大缓存的主要区别

1)存储大小

  • cookie数据大小不能超过4k。
  • sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

2)有效时间

  • localStorage:存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
  • sessionStorage:数据在当前浏览器窗口关闭后自动删除。
  • cookie:设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭,

3)数据与服务器之间的交互方式

  • cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端。
  • sessionStorage仅在本地保存,只能在同一标签下共享。
  • localStorage仅在本地保存,同一浏览器,标签页全部共享。

4)适合场景使用

  • localStorage:适合用于用户离开不清除的数据,如记住密码。
  • sessionStorage:适合用于做一些用户离开时及清除的数据,如用户信息。
  • cookie:适合用于和服务器交互的数据,如用户发起请求的唯一凭证。

当然只是说谁更适合,存在即合理,别和我杠。

2.localStorage写法

localStorage.getItem("code")//或localStorage.code或localStorage["code"],获取code
localStorage.setItem("code","A")//或localStorage.code="A"或localStorage["code"]="A",存储code
localStorage.removeItem("code")//存储的持久数据不清除是不会丢失的,清除code
localStorage.clear(); //清除本地全部localStorage缓存

总结

到此这篇关于Vue利用localStorage本地缓存使页面刷新验证码不清零的文章就介绍到这了,更多相关Vue页面刷新验证码不清零内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
DOM精简教程
Oct 03 Javascript
javawscript 三级菜单的实现原理
Jul 01 Javascript
XENON基于JSON变种
Jul 27 Javascript
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
js数组常用最重要的方法
Feb 04 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 #Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 #Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 #Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 #Javascript
在vue中axios设置timeout超时的操作
Sep 04 #Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 #Javascript
JavaScript中的执行环境和作用域链
Sep 04 #Javascript
You might like
关于时间计算的结总
2006/12/06 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
php跨站攻击实例分析
2014/10/28 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
python获取从命令行输入数字的方法
2015/04/29 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
关于青春的演讲稿三分钟
2014/08/22 职场文书
干部个人对照检查材料
2014/08/25 职场文书
119消防日活动总结
2014/08/29 职场文书
家长对孩子的寄语
2015/02/26 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang