用cookie記住用戶信息后隱藏信息輸入框，優化用戶體驗

編輯：狂族晨曦來源：經驗雜筆日期：2016-04-17 閱讀： 3,475 次 3 條評論 » 百度已收錄

上一篇文章，先森解決了設置CDN緩存后，用戶信息無法被記住的問題。使用的是JS代碼操作cookie，用cookie記住用戶信息，這樣就可以無視緩存了。

但這解決的只是初步的技術難題，后續我們還需要對用戶體驗做好優化。

先森是這樣想的，當cookie中，保存了用戶有效信息后，起碼要做到這幾點：

1.昵稱、郵箱、網址的填寫框就應該自動隱藏。

2.頭像旁邊顯示用戶昵稱。

3.同時，還需要在旁邊增加一個按鈕，方便用戶修改信息。

隱藏信息填寫框

其實很簡單，我們只需要在讀取cookie信息并寫入填寫框之后，添加一段代碼即可。關于用cookie保存用戶信息的全部代碼，大家請看前篇文章：

用cookie解決網站開啟CDN緩存之后已知用戶頭像昵稱被緩存等系列問題

我們在“加載用戶信息”那一段中添加代碼。

你們可以把前文中的“加載用戶信息”部分的代碼換成下面這段（主要是19行）：

//加載用戶信息
function LoadRememberInfo() {
	var strName=GetCookie("author");
	var strEmail=GetCookie("email");
	var strHomePage=GetCookie("url");
	var bolRemember=GetCookie("chkRemember");
    var a_vlaue= document.getElementById("author");
    if (a_vlaue != null){
	    if(bolRemember=="true"){ //如果勾選了“記住我”
                    //通過decodeURIComponent對內容解碼
		    if(strName){document.getElementById("author").value=decodeURIComponent(strName);//從 cookie獲取填寫昵稱
			};
		    if(strEmail){document.getElementById("email").value=strEmail;};//從 cookie獲取填寫郵箱
                     //通過decodeURIComponent對內容解碼
		    if(strHomePage){document.getElementById("url").value=decodeURIComponent(strHomePage);};//從 cookie獲取填寫網址
		    if(bolRemember){document.getElementById("saveme").checked=bolRemember;};

//----------------新增代碼-開始---------------------
			document.getElementById("comment-author-info").style.display="none";//隱藏“需要填寫昵稱郵箱”
			document.getElementById("nickname").innerHTML=document.getElementById("author").value;//讓頭像旁邊，顯示已知用戶的名稱
			document.getElementById("huilai").innerHTML='歡迎回來';//將“歡迎發表評論”改為“歡迎回來”
			document.getElementById("switch-author").style.display="";//顯示“修改信息”
//----------------新增代碼-結束---------------------	
	    }
	    if(GetCookie("username")){
		    document.getElementById("author").value=unescape(GetCookie("username"));
	    }
    }	
}

主要是上面新增代碼部分，后面的注解寫的很清楚了，請根據自己的實情修改。

贊 (2)