adding 記住密碼 etl cookie 代碼 自動 rul ons model

的今天突來興致，試了一下將用戶名和密碼存在cookie和localStorage裏如何實現；從代碼難易程度來講，果斷選擇了將用戶名和密碼存在localStorage裏面。當然菜鳥上這麽說的，樓下。

也許我不是一個好的程序員，不說廢話了，直接上代碼了：

<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm loginFrom">
<h1 style="font-size: 1.5rem;color: #fff;font-weight: bold;padding: 1rem 0;">登陸</h1>

<el-form-item >
<el-input placeholder="賬號" v-model="ruleForm.username"></el-input>
</el-form-item>
<el-form-item>
<el-input type="password" v-model="ruleForm.password" placeholder="密碼"></el-input>
</el-form-item>
<div style="padding: 1rem 0 2rem 0;" class="clear">
<span class="lf" style="color:#0489cc;">幫助</span>
<div class="rt">
<el-checkbox v-model="checked" style="color:#a0a0a0;">一周內自動登錄</el-checkbox>
<span @click="clear" style="cursor: pointer;color: #f19149;font-size: 0.75rem;margin-left: 5px;">忘記密碼？</span>
</div>
</div>
<el-button type="primary" @click="submitForm(‘ruleForm‘)" style="width: 100%;">登陸</el-button>
</el-form>
</template>
// 當刷新頁面時候獲取一下localStorage裏存的值
mounted() {
this.getlocalStorage()
},
methods: {
// 當記住密碼的checbox選中時，像localStorage裏存入一下用戶輸入的用戶名和密碼
submitForm(formName) {
const self = this
if (self.checked == true) {
self.setlocalStorage(self.ruleForm.username, self.ruleForm.password)
} else {
self.clearlocalStorage()
}
//與後端請求代碼，暫時還沒有請求地址，先省略了
console.log(‘登陸成功‘)
},
//像localStorage裏存入從頁面獲取的用戶名和密碼；
setlocalStorage(c_name, c_pwd) {
localStorage.siteName = c_name
localStorage.sitePassword = c_pwd
},
getlocalStorage: function() {
this.ruleForm.username = localStorage.getItem(localStorage.key(1)) //保存到保存數據的地方
this.ruleForm.password = localStorage.getItem(localStorage.key(2))
},
// 點擊忘記密碼，清空localStorage裏的存儲
clear: function() {
this.setlocalStorage(‘‘, ‘‘)
}
}
}

vue2.0項目記住密碼和用戶名實例