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 相关文章推荐
javascript removeChild 使用注意事项
Apr 11 Javascript
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
Dec 19 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
webpack之devtool详解
Feb 10 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
Javascript如何实现扩充基本类型
Aug 26 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
php print EOF实现方法
2009/05/21 PHP
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
解析php中curl_multi的应用
2013/07/17 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
最基础的Python的socket编程入门教程
2015/04/23 Python
python 字段拆分详解
2019/12/17 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
PHP经典面试题
2016/09/03 面试题
查环查孕证明
2014/01/10 职场文书
30岁生日感言
2014/01/25 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
小组口号大全
2014/06/09 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
企业法人任命书
2015/09/21 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
Golang获取List列表元素的四种方式
2022/04/20 Golang