用cookie记住用户信息后隐藏信息输入框，优化用户体验

编辑：狂族晨曦 来源：经验杂笔 日期：2016-04-17 阅读： 3,427 次 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"));
	    }
    }	
}

主要是上面新增代码部分，后面的注解写的很清楚了，请根据自己的实情修改。