Vue uses localStorage local cache to make page refresh verification code not clear

Today we use local cache localStorage to achieve page refresh. The verification code countdown is the same as when refreshing, rather than clearing it. Secondly, we can use localStorage to implement user information cache, remember passwords and other functions about cache. Here we will briefly demonstrate the verification code function.

1. Functional implementation

Without further ado, just upload 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; // Set a global countdown time export default {
 data() {
  return {
   show: true,
   count: '',
   timer: null,
  }
 },
 components: {
  marquee
 },
 created(){
   // Get the countdown abort position when entering the page and continue to count   if ( > 0 &&  <= TIME_COUNT){
    TIME_COUNT = ;
     = TIME_COUNT;
     = false;
     = setInterval(() => {
     if ( > 0 &&  <= TIME_COUNT) {
      --
       = ;
     } else {
       = true;
      clearInterval();
       = null
     }
    }, 1000)
   }
 },
 methods: {
  getCode () {
   // Verification code countdown   if (!) {
     = TIME_COUNT
     = ;
     = false
     = setInterval(() => {
    if ( > 0 &&  <= TIME_COUNT) {
     --
      = ;
    } else {
      = true
     clearInterval()
      = null
    }
   }, 1000)
  }
 }
 }
</script>

2. Knowledge expansion

1. Compare the main differences between cookies, sessionStorage and localStorage

1) Storage size

• The cookie data size cannot exceed 4k.
• SessionStorage and localStorage also have storage size limitations, but are much larger than cookies and can reach 5M or larger.

2) Valid time

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

3) How to interact with the server

• The cookie data will be automatically passed to the server, and the server can also write cookies to the client.
• sessionStorage is only saved locally and can only be shared under the same tag.
• localStorage is only saved locally, and all tabs are shared in the same browser.

4) Suitable for use in scenarios

• localStorage: Suitable for data that users leave without clearing, such as remembering passwords.
• sessionStorage: Suitable for making some data that users leave and clear, such as user information.
• Cookie: Data suitable for interaction with the server, such as unique credentials for user-initiated requests.

Of course, it’s just to say who is more suitable, and it’s reasonable to exist. Don’t argue with me.

How to write

("code")//or localStorage["code"], get code("code","A")//or ="A" or localStorage["code"]="A", store code("code")//The stored persistent data will not be lost without clearing. Clear code(); //Clear all locallocalStoragecache

Summarize

This is the article about Vue using localStorage local cache to make the page refresh verification code not clear. For more relevant content on Vue page refresh verification code not clear, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!