Realization of Vue using localStorage local cache to make page refresh verification code not clear

Today, we use the local cache localStorage to refresh the page, and the countdown of the verification code is the same as that when refreshing, instead of clearing it. Secondly, we can use localStorage to cache user information, remember passwords and other caching functions. Here, we will briefly demonstrate the verification code function under 1.

1. Function realization

Don't say much, just go to the code

<template>
	<button @click="getCode()" :disabled="!show">
  <span v-show="show"> Send verification code </span>
  <span v-show="!show" class="count">{{count}} s</span>
 </button>
</template>

<script>
 let TIME_COUNT = 60; //  Settings 1 The time of the global countdown 
 export default {
 data() {
  return {
   show: true,
   count: '',
   timer: null,
  }
 },
 components: {
  marquee
 },
 created(){
   //  When entering the page, get the location where the countdown stopped and continue the timing 
   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 () {
   //  Verification code countdown 
   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>

2. Knowledge development

1. Compare the main differences among cookies, sessionStorage and localStorage caches

1) Storage size

cookie data size cannot exceed 4k. Although sessionStorage and localStorage also have storage size limitations, they are much larger than cookie, and can reach 5M or larger.

2) Effective time

localStorage: Store persistent data, and the data will not be lost after the browser is closed unless the data is actively deleted; sessionStorage: Data is automatically deleted when the current browser window is closed. cookie: The set cookie expiration time is valid until 1, even if the window or browser is closed,

3) How data interacts with the server

cookie data will be automatically transferred to the server, the server can also write cookie to the client. sessionStorage is saved locally only and can only be shared under the same 1 tag. localStorage is only saved locally and shared with 1 browser and tabs.

4) Suitable for scene use

localStorage: Suitable for users leaving unerased data, such as remembering passwords. sessionStorage: It is suitable for doing 1 data when users leave and clear, such as user information. cookie: Data suitable for interacting with the server, such as only 1 credentials for the user to initiate the request.

Of course, it just says who is more suitable, existence is reasonable, don't argue with me.

2. localStorage writing

localStorage.getItem("code")// Or localStorage.code Or localStorage["code"] , get the code
localStorage.setItem("code","A")// Or localStorage.code="A" Or localStorage["code"]="A" , storage code
localStorage.removeItem("code")// Stored persistent data will not be lost without clearing, clearing code
localStorage.clear(); // Clear all local localStorage Cache 

Summarize