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

今天我们使用本地缓存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页面刷新验证码不清零内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue中使用localstorage来存储页面信息

    vue中使用localstorage来存储页面信息

    今天小颖在跟着慕课网学习vue,不学不知道,一学吓一跳,学了才发现,我之前知道的只是vue的冰山一角,嘻嘻,今天把小颖跟着慕课网学习的demo,给大家分享下,希望对大家有所帮助嘻嘻. 环境搭建: 参考:vue API 超简单的Vue.js环境搭建教程 详情: npm install --global vue-cli  vue init webpack vue-project 然后: cd vue-project npm install    如果你配置了淘宝镜像,也可以用cnpm install

  • 基于vue2.0+vuex+localStorage开发的本地记事本示例

    基于vue2.0+vuex+localStorage开发的本地记事本示例

    本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本.兼容PC端和移动端. 实现效果 功能说明 支持回车添加事件 支持事件状态切换 添加事件 -> 进入未完成列表 未完成 -> 已完成(勾选checkbox) 未完成 -> 已取消(点击取消按钮) 已完成 -> 未完成(取消勾选checkbox) 已取消 -> 未完成(点击恢复按钮) 支持控制台打印所有事件数据 支持筛选事件 支持编辑事件 支持删除事件 支持清空所有事件

  • 详解vue中localStorage的使用方法

    什么是localStorage 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage 1.sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载 2.localStorage(长期存储) :与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存在 所以上次使用cookie的时候就遇到了一个坑,设置后

  • 详解Vue中localstorage和sessionstorage的使用

    1. 项目使用中暴露出来的几个问题 大家到处直接使用localstorage['aaa']='这是一段示例字符串'这些原生语法实现,这样耦合度太高了,假如有一天我们需要换实现方式,或者对存储大小做一些控制,那么需要修改的代码就会很多 项目很大,那么大家起的key的名字难免会重复,而且这样也会造成全局污染 因为localstorage的使用不规范,所以造成了存储空间的浪费和不够用 2. 解决办法 封装storage的使用方法,统一处理 规范storage的key值的命名规则 规范storage的使

  • vue生成token保存在客户端localStorage中的方法

    vue生成token保存在客户端localStorage中的方法

    前面我们已经了解了可以通过localStorage在客户端(浏览器)保存数据. 我们后端有这样一个接口: http://localhost/yiiserver/web/index.php/token?client_appid=aaa&client_appkey=bbb 其实就向clients(理解为用户表即可)里面去生成一个token 这里的client_appid 就相当于用户名,client_appkey 就相当于密码. 这样后端认证之后会生成一个access-token,我们需要把这个ac

  • vue 界面刷新数据被清除 localStorage的使用详解

    localStorage是html5新增的一个本地存储API,它有5M的大小空间,通过(key,value)的方式存储在浏览器中 window.localStorage.setItem('key', value); //储存文件 window.localStorage.getItem('key'); //读取文件 window.localStorage.removeItem('key'); //清除文件 vue中使用方法: 1.新建一个store.js文件 localStorage只能存储字符串

  • 详解vuex结合localstorage动态监听storage的变化

    需求:不同组件间共用同一数据,当一个组件将数据发生变化时,其他组件也可以响应该变化. 分析:vue无法监听localstorage的变化.localstorage主要用于不同页面间传值,vue适合组件间传值.对于组件间共用同一数据又想保存住信息或者再页面刷新的时候不丢失数据(vuex在页面刷新的时候存储的值会丢失,localstorage存储在本地浏览器中),可以采用vuex+localstorage的方式. 关于vuex和storage的区别 1.最重要的区别:vuex存储在内存,locals

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

    今天我们使用本地缓存localStorage来实现页面刷新了,验证码倒计时还是和刷新时一样,而不是清零,其次我们可以使用localStorage去实现用户信息缓存,记住密码等等关于缓存的功能,在这里就简单演示一下验证码功能. 一.功能实现 话不多说,直接上代码 <template> <button @click="getCode()" :disabled="!show"> <span v-show="show">

  • Vue利用History记录上一页面的数据方法实例

    Vue利用History记录上一页面的数据方法实例

    前言 本文主要介绍的是Vue利用History记录上一页面数据的相关内容,vue使用history后,能够使得url更加漂亮,也就是不再有'#'的问题,下面话不多说了,来一起看看详细的介绍吧 UI 需求 从列表页的第二页进入详情页,返回时列表页仍然显示在第二页: 从列表页的第二页进入详情页,返回时列表页的筛选条件仍然存在. <!--more--> 技术选择 使用vue-router组件,通过this.$router.push({path: path, query: query});方式,将页码

  • vue中,在本地缓存中读写数据的方法

    1.安装good-storage插件 cnpm i good-storage --save 2.读/写的方法 common/js/cache.js: import storage from 'good-storage' const SEARCH_KEY = '__search__' const SEARCH_MAX_LENGTH = 15 // compare:findindex传入的是function,所以不能直接传val function insertArray(arr, val, comp

  • 解决vue+element 键盘回车事件导致页面刷新的问题

    背景 今天发现输入框输入内容后回车就会刷新页面 解决 <el-form :inline="true" @submit.native.prevent> </el-form> el-from 加上 @submit.native.prevent 具体是参考element-ui文档解决的 W3C 标准中有如下规定: When there is only one single-line text input field in a form, the user agent

  • 在vue中实现某一些路由页面隐藏导航栏的功能操作

    为了将导航栏显示在每一个页面中,可以将导航栏与<router-view>放在同一级显示,如下: <header> ... </header> <router-view></router-view> 但是,在某些时候,我们需要隐藏导航栏显示,比如登录界面,为了实现导航栏的隐藏,可以使用如下代码: <header v-show="$route.name!=='login'"> ... </header> &

  • Vue实现远程获取路由与页面刷新导致404错误的解决

    一.背景 先简单介绍一下现在项目情况:前后端分离,后端服务是Java写的,前端是Vue+ElementUI. 最近的一个需求是:通过后端Api去获取前端路由表,原因是每个登录角色对应的前端路由表可能是不一样的(权限问题) 二.遇到的问题 因为前端Vue+ElementUI项目是单页应用--即只有一个index.html页面,如果路由从远程获取的话,每次F5或点击刷新按钮刷新页面的时候,就会找不到对应的路径而报404错误 三.解决方案 1.通过api远程获取路由,然后在前端生成对应路由 /* 将

  • 解决vue页面刷新vuex中state数据丢失的问题

    解决vue页面刷新vuex中state数据丢失的问题

    页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 state,那么该问题即可解决. 1.localstorage 可以使用 localstorage 来保存信息. [在某组件中添加如下钩子函数.比如 App.vue中] created() { //在页面加载时读取localStorage里的状态信息 if (localStorage.getItem("store") ) { this.$store

  • vue单页应用在页面刷新时保留状态数据的方法

    在Vue单页应用中,如果在某一个具体路由的具体页面下点击刷新,那么刷新后,页面的状态信息可能就会丢失掉.这时候应该怎么处理呢?如果你也有这个疑惑,这篇文章或许能够帮助到你 一.问题 现在产品上有个需求:单页应用走到某个具体的页面,然后点击刷新后,刷新的页面要与刷新前的页面要保持一致. 这时候就需要我们保存刷新之前页面的状态. 二.一种解决方案 在这个Vue单页应用中,王二是用Vuex作为状态管理的,一开始王二的思路是将Vuex里的数据同步更新到localStorage里. 即:一改变vuex里的

  • 禁用aspx页面的客户端缓存(防止页面被修改)

    默认情况下,IE打开一个网页,会在本地进行缓存,这样是为了减少访问服务器的次数提高性能.但有时这也给我们带来了弊端,比如修改信息的页面,在提交修 改后,再次打开次页面,因为URL并没有改变,因此IE会读取本地缓存,页面显示的仍然是原始信息,这种情况特别容易出现在弹出对话框或窗口进行修改的方 式. 在ASP.NET中可以在页面中加入以下内容: 复制代码 代码如下: <%@ OutputCache Location="None" VaryByParam="None"

  • vue缓存的keepalive页面刷新数据的方法

    用到这个的业务场景是这样的: a页面点击新建列表按钮进入到新建的页面b,填写b页面并点击b页面确认添加按钮,把这些数据带到a页面,填充到列表(数组),可以添加多条, 点击这条的时候进入到编辑页面,确认修改之后,回退到a页面,a页面需要更新这条数据 实现这个功能的时候,由于是路由页面之间的跳转,首先想到的方案有几个:1. 用sessionStorage本地存储:2. 用路由参数带过去:3. 用兄弟组件传值 由于是添加完之后如果按回退是需要退出整个页面,如果用路由跳转,会出现回退到编辑页面了,所以这

随机推荐