上周給運營系統補了個記住密碼的功能，好像很容易的需求啊，還真費了不少勁，補充了不少cookie方面的知識~特地總結下！

大體思路就是通過存/取/刪cookie實現的；每次進入登錄頁，先去讀取cookie，如果瀏覽器的cookie中有賬號信息，就自動填充到登錄框中，存cookie是在登錄成功之后，判斷當前用戶是否勾選了記住密碼，如果勾選了，則把賬號信息存到cookie當中，效果圖如下：

瀏覽器中的cookie信息如下圖，注意這里的cookie的expire/Max-Age過期時間，這個時間是格林尼治標準時間GMT，世界統一的時間，GMT+8小時就是北京時間，初中地理沒學好，特地去查了下！！

實現代碼：

html

?

<template><div class="login-wrapper"><form class="form-signin" role="form"><h2 class="form-signin-heading">點播系統</h2><input class="form-control" v-model="userName" v-on:keydown="doLogin($event)" placeholder="用戶名" required autofocus><input type="password" class="form-control" v-model="passWord" v-on:keydown="doLogin($event)" placeholder="Password"><div class="checkbox remember-password-container"><input type="checkbox" value="remember-me" v-model="rememberPassword" id="remember-password-checkbox" v-on:click="doRememberPassword($event)"><label for="remember-password-checkbox">Remember me</label></div><div class="btn btn-lg btn-primary btn-block" v-on:click="doLogin()">Sign in</div></form></div> </template>

?

登錄處理邏輯js

?

export default {// name: 'component2',data () {return {userName: "",passWord: "",rememberPassword: false}},// 相當于init doAjaxbeforeCreate() {// console.log('login頁面 加載完成！')},// 相當于ready 模板編譯掛載之后mounted: function() {//讀取cookie中的賬號信息，如果有accountInfo的話，則說明該用戶之前勾選了記住密碼的功能，則需要自動填上賬號密碼this.loadAccountInfo();},methods: {doLogin: function(event){var mySelf = this;const router = this.$router;// console.log(router)// router.go();// router.push({path:'/index'})// console.log(pars.domain)var mySelf = this;var userName = mySelf.userName;var userPwd = mySelf.passWord;//記住密碼checkbox的勾選狀態 和賬號信息的字符串var rememberStatus = mySelf.rememberPassword;var accountInfo = "";accountInfo = userName + "&" + userPwd;if (event && event.type == 'keydown' && event.keyCode != 13) {return;}//console.log("用戶名：" + userName)//console.log("密碼：" + userPwd)if (userName == ""){util.showDialog('error','用戶名不能為空！');return;}if (userPwd == ""){util.showDialog('error','密碼不能為空！');return;}$.get( pars.domain + "xxx" + "&t=" + (new Date).getTime(), function(ret) {if (ret.code == 0) {//如果登錄成功，則把賬號信息保存在cookie當中if (rememberStatus){console.log("勾選了記住密碼，現在開始寫入cookie");util.setCookie('accountInfo',accountInfo,1440*3);}else{console.log("沒有勾選記住密碼，現在開始刪除賬號cookie");util.delCookie('accountInfo');}// 若為本地環境 則手寫cookieif (window.location.href.indexOf('localhost') != -1){util.setCookie('token','zhaopeng_58e0cbbea951f0e79fafcee80da522b8',1440);}// console.log(window.location.href)console.log('登錄的返回值為0');router.push({path:'/'});} else {util.showDialog('error','賬號名或密碼錯誤!');}}, "json");},doRememberPassword: function(event){let mySelf = this;let rememberStatus = mySelf.rememberPassword;// event.preventDefault();mySelf.rememberPassword = !rememberStatus;//如果去掉勾選，則刪掉cookie// if (!rememberStatus){// }// mySelf.rememberPassword = false;},loadAccountInfo: function(){let mySelf = this;//zhaopeng&A15hOsu8YeGnCsjblet accountInfo = util.getCookie('accountInfo');//如果cookie里沒有賬號信息if(Boolean(accountInfo) == false){console.log('cookie中沒有檢測到賬號信息！');return false;}else{//如果cookie里有賬號信息console.log('cookie中檢測到賬號信息！現在開始預填寫！');let userName = "";let passWord = "";let index = accountInfo.indexOf("&");userName = accountInfo.substring(0,index);passWord = accountInfo.substring(index+1);mySelf.userName = userName;mySelf.passWord = passWord;mySelf.rememberPassword = true;}}} }

操作cookie邏輯js

// 設置cookie setCookie: function(c_name,value,expiremMinutes){var exdate = new Date();exdate.setTime(exdate.getTime() + expiremMinutes * 60 * 1000);document.cookie= c_name + "=" + escape(value)+((expiremMinutes==null) ? "" : ";expires="+exdate.toGMTString()); },// 讀取cookie getCookie: function(c_name){if (document.cookie.length>0){var c_start=document.cookie.indexOf(c_name + "=");if (c_start!=-1){ c_start=c_start + c_name.length+1;var c_end=document.cookie.indexOf(";",c_start);if (c_end==-1) c_end = document.cookie.lengthreturn unescape(document.cookie.substring(c_start, c_end))}}return "" },// 刪除cookie delCookie: function(c_name){var exp = new Date();exp.setTime(exp.getTime() - 1);var cval = this.getCookie(c_name);if(cval!=null){document.cookie = c_name + "=" + cval + ";expires=" + exp.toGMTString();} },

?

?

?

?

總結

以上是生活随笔為你收集整理的前端记住密码功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。