vue登録ページはクッキーを使って7日間のパスワード機能を覚える方法を実現します。

問題の説明
プロジェクトの登録ページには、7日間のパスワードを覚える機能があります。この文章は書き方を記録します。主にクッキーを使っています。コメントは詳しく書いています。私が書いたコメントの手順を見てもいいです。直接測定して有効である
html部分
コード図

効果図

コードの貼り付け

      <el-form
       ref="form"
       :model="form"
       label-width="80px"
       label-position="top"
       @submit.native.prevent
      >
       <el-form-item label="   /  ">
        <div class="userError">
         <el-input
          size="mini"
          v-model.trim="form.userName"
          clearable
         ></el-input>
        </div>
       </el-form-item>
       <el-form-item label="  ">
        <div class="pwdError">
         <el-input
          size="mini"
          v-model.trim="form.loginPwd"
          clearable
          show-password
         ></el-input>
        </div>
       </el-form-item>
       <el-checkbox label="    " v-model="isRemember"></el-checkbox>
       <el-button native-type="submit" size="mini" @click="loginPage"
        >  </el-button
       >
      </el-form>

js部分

export default {
 name: "login",
 data() {
  return {
   form: {
    userName: '',
    loginPwd: '',
   },
   isRemember: false,
  };
 },
 mounted() {
  //  1 ，        ，       cookie             
  this.getCookie();
 },
 methods: {
  /*  3 ，            ，           
          ，       
         ，                
              ，     cookie，       
              ，          cookie    7    ，    
           （            cookie  ）
  */
  async loginPage() {
   //                     
   const res = await this.$api.loginByUserName(this.form)
   if(res.isSuccess == false){
    this.$message.error("    ")
   }
   else{
    const self = this;
    //  4 ，        ，     cookie  ，                 cookie 
    if (self.isRemember === true) {
     //      ，  ，     （    ）3   
     // 1/24/60          ，         
     self.setCookie(this.form.userName, this.form.loginPwd, 1/24/60);
     // self.setCookie(this.form.userName, this.form.loginPwd, 7); //     7     
    } 
    //           Cookie，    cookie            cookie，        
    else {
     self.clearCookie();
    }
    //   ，         cookie，           
    this.$router.push({
     name: "project",
    });
   }
  },
  //   cookie
  setCookie(username, password, exdays) {
   var exdate = new Date(); //          
   exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //             ，  cookie     ，        
   //      cookie,  cookie      name=value   
   window.document.cookie = "userName" + "=" + username + ";path=/;expires=" + exdate.toGMTString();
   window.document.cookie = "userPwd" + "=" + password + ";path=/;expires=" + exdate.toGMTString();
   window.document.cookie = "isRemember" + "=" + this.isRemember + ";path=/;expires=" + exdate.toGMTString();
  },
  //  2 ， cookie          ，            form       ，       
  getCookie: function () {
   if (document.cookie.length > 0) {
    var arr = document.cookie.split("; "); //          。         
    // console.log(arr,"  ");
    for (var i = 0; i < arr.length; i++) {
     var arr2 = arr[i].split("="); //     
     // console.log(arr2,"  2");
     // //          
     if (arr2[0] === "userName") {
      this.form.userName = arr2[1]; //             
     } else if (arr2[0] === "userPwd") {
      this.form.loginPwd = arr2[1];//   
     } else if (arr2[0] === "isRemember") {
      this.isRemember = Boolean(arr2[1]);
     }
    }
   }
  },
  //   cookie
  clearCookie: fu![image](/img/bVcOHhz)
   this.setCookie("", "", -1); //          1 
  },
 },
};

クッキー記憶図

締め括りをつける
実は簡単です。つまり、クッキーの失効日を設定します。もちろん、中にはいくつかのフォーマットの処理、データの加工が必要です。
補足します。クッキーはブラウザに設置されています。例えば、C盤にインストールされています。だから、クッキーはC盤の中にあるフォルダの下にあります。そのフォルダはクッキーだけではなく、locastrageとsession Storrageと他にあります。具体的にはどのフォルダが自分で探してみてもいいです。ローカルストレージというのは、実は自分のコンピュータに存在しています。
ここで、vue登録ページについて、クッキーを使って7日間のパスワード機能を覚える方法を実現した文章を紹介します。もっと関連したvue登録ページクッキーはパスワードを覚えています。私達の以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。