项目总结——使用localStorage实现记住密码

由于每次都输入用户名密码太累，想在自己的个人网站上添加一个记住密码功能，以前的项目是使用浏览器cookie实现的,cookie可以设置过期时间，而localStorage不行，是cookie的优势，但是cookie代码比较复杂，localStorage可以完美替代功能且代码简单，项目中不需要设置记住密码过期时间，故使用localStorage实现。

具体代码如下

部分html代码，

<input type="text" v-model="login.username">
<input type="password" v-model="login.password">
<input type="checkbox" :checked="isChecked" id="checkbox">
<label for="checkbox">记住密码</label>

相关数据

 login:{
   username:"",
   password:""
 }
 isChecked:false
 

相关函数

//记住密码相关
 checkRemember(){
   let username = localStorage.getItem("username")
   let password = localStorage.getItem("password")
   if(username && password){
     this.login.username = username
     this.login.password  = password
     this.isChecked = true
   }
 },
 setOrRemoveRemember(username,password){
      if(document.getElementById("checkbox").checked){
        localStorage.setItem("username",username)
        localStorage.setItem("password",password)
      }else{
        localStorage.removeItem("username")
        localStorage.removeItem("password")
      }      
    }

在mounted钩子中调用checkRemember

 mounted(){
    this.checkRemember()
  },

在发送情求返回登录成功时候调用setOrRemoveRemember

 async userLogin(){  
      try{
        if(this.login.username.trim()=="" || this.login.password.trim()==""){
            this.$message.error('登录失败，用户名和密码不能为空')
            return
          }
        await this.$store.dispatch("userLogin",this.login)
        this.setOrRemoveRemember(this.login.username,this.login.password)
        this.$message.success('登录成功')
        this.$router.push("/home")    
      }catch{
        this.$message.error('登陆失败，请检查用户名和密码是否正确')
      }       
    },

至此 ，可以实现当登录成功的时候如果勾选记住密码则记住用户名和密码，如果未勾选则不记住。进入登录页面时查看是否记住密码，如果记住则将密码填入input中