1.記住密碼勾選,點登陸時,將賬號和密碼儲存到cookie,下次登陸自動顯示到表單內
2.不勾選,點登陸時候則清空之前儲存到cookie的值,下次登陸需要手動輸入
大體思路就是通過存/取/刪cookie實現的;每次進入登入頁,先去讀取cookie,如果瀏覽器的cookie中有賬號資訊,就自動填充到登入框中,存cookie是在登入成功之後,判斷當前使用者是否勾選了記住密碼,如果勾選了,則把賬號資訊存到cookie當中,效果圖如上:
<div
class
="ms-login"
>
<
el-form
:model
="ruleform"
:rules
="rules"
ref="ruleform"
label-width
="0px"
class
="demo-ruleform"
>
<
el-form-item
prop
="username"
>
<
el-input
v-model
="ruleform.username"
placeholder
="使用者名稱"
>
el-input
>
el-form-item
>
<
el-form-item
prop
="password"
>
<
el-input
type
="password"
placeholder
="密碼"
v-model
="ruleform.password"
@keyup.enter.native
="submitform('ruleform')"
>
el-input
>
el-form-item
>
<
el-checkbox
v-model
="checked"
>記住密碼
el-checkbox
>
<
br>
<
br>
<
div
class
="login-btn"
>
<
el-button
type
="primary"
@click
="submitform('ruleform')"
>登入
el-button
>
div>
el-form
>
div>
//頁面載入呼叫獲取cookie值
mounted() ,
methods:
else
//與後端請求**,本功能不需要與後台互動所以省略
console.log("登陸成功");
});},
//設定cookie
setcookie(c_name, c_pwd, exdays) ,
//讀取cookie
getcookie: function
() else
if (arr2[0] == 'userpwd') }}
},//清除cookie
clearcookie: function
()
瀏覽器中的cookie資訊如下圖,注意這裡的cookie的expire/max-age過期時間,這個時間是格林尼治標準時間gmt,世界統一的時間,gmt+8小時就是北京時間。(這裡不做加密功能)
1.記住密碼勾選,點登陸時,將賬號和密碼儲存到cookie,下次登陸自動顯示到表單內
2.不勾選,點登陸時候則清空之前儲存到cookie的值,下次登陸需要手動輸入
大體思路就是通過存/取/刪cookie實現的;每次進入登入頁,先去讀取cookie,如果瀏覽器的cookie中有賬號資訊,就自動填充到登入框中,存cookie是在登入成功之後,判斷當前使用者是否勾選了記住密碼,如果勾選了,則把賬號資訊存到cookie當中,效果圖如上:
<div
class
="ms-login"
>
<
el-form
:model
="ruleform"
:rules
="rules"
ref="ruleform"
label-width
="0px"
class
="demo-ruleform"
>
<
el-form-item
prop
="username"
>
<
el-input
v-model
="ruleform.username"
placeholder
="使用者名稱"
>
el-input
>
el-form-item
>
<
el-form-item
prop
="password"
>
<
el-input
type
="password"
placeholder
="密碼"
v-model
="ruleform.password"
@keyup.enter.native
="submitform('ruleform')"
>
el-input
>
el-form-item
>
<
el-checkbox
v-model
="checked"
>記住密碼
el-checkbox
>
<
br>
<
br>
<
div
class
="login-btn"
>
<
el-button
type
="primary"
@click
="submitform('ruleform')"
>登入
el-button
>
div>
el-form
>
div>
//頁面載入呼叫獲取cookie值
mounted() ,
methods:
else
//與後端請求**,本功能不需要與後台互動所以省略
console.log("登陸成功");
});},
//設定cookie
setcookie(c_name, c_pwd, exdays) ,
//讀取cookie
getcookie: function
() else
if (arr2[0] == 'userpwd') }}
},//清除cookie
clearcookie: function
()
瀏覽器中的cookie資訊如下圖,注意這裡的cookie的expire/max-age過期時間,這個時間是格林尼治標準時間gmt,世界統一的時間,gmt+8小時就是北京時間。(這裡不做加密功能)
記住密碼功能實現
可以用兩種方式實現該功能 1 cookie方式 2 localstorage方式 click me ps 我用cookie時未成功。var user document.getelementbyid user var password document.getelementbyid password ...
vue專案實現記住密碼到cookie功能 附原始碼
1.記住密碼勾選,點登陸時,將賬號和密碼儲存到cookie,下次登陸自動顯示到表單內 2.不勾選,點登陸時候則清空之前儲存到cookie的值,下次登陸需要手動輸入 大體思路就是通過存 取 刪cookie實現的 每次進入登入頁,先去讀取cookie,如果瀏覽器的cookie中有賬號資訊,就自動填充到登...
vue專案實現記住密碼到cookie功能
1.記住密碼勾選,點登陸時,將賬號和密碼儲存到cookie,下次登陸自動顯示到表單內 2.不勾選,點登陸時候則清空之前儲存到cookie的值,下次登陸需要手動輸入 大體思路就是通過存 取 刪cookie實現的 每次進入登入頁,先去讀取cookie,如果瀏覽器的cookie中有賬號資訊,就自動填充到登...