成航先森 成航先森

成都航院计算机系一个学生的个人博客

 

经验杂笔

最新文章

经验杂笔
当前位置: 首页 » 大学杂谈 » 经验杂笔 » 用cookie记住用户信息后隐藏信息输入框,优化用户体验

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

编辑:狂族晨曦 来源:经验杂笔 日期:2016-04-17 阅读: 2,941 次 3 条评论 » 百度已收录

上一篇文章,先森解决了设置CDN缓存后,用户信息无法被记住的问题。使用的是JS代码操作cookie,用cookie记住用户信息,这样就可以无视缓存了。

但这解决的只是初步的技术难题,后续我们还需要对用户体验做好优化。

先森是这样想的,当cookie中,保存了用户有效信息后,起码要做到这几点:

1.昵称、邮箱、网址的填写框就应该自动隐藏。

2.头像旁边显示用户昵称。

3.同时,还需要在旁边增加一个按钮,方便用户修改信息。

隐藏信息填写框

隐藏信息填写框

其实很简单,我们只需要在读取cookie信息并写入填写框之后,添加一段代码即可。关于用cookie保存用户信息的全部代码,大家请看前篇文章:

我们在“加载用户信息”那一段中添加代码。

你们可以把前文中的“加载用户信息”部分的代码换成下面这段(主要是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"));
	    }
    }	
}

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

标签:
除特别注明外,本站所有文章均为成航先森 www.capjsj.cn 原创,本文共1711个字
转载请注明出处来自https://www.capjsj.cn/ycookiejzyhxxhycxxsrk_yhyhty.html
已有 3 位"计工"发布了激烈的评论,还有N多人围观笑而不语评论
的头像
欢迎发表评论
取消评论

表情
疑问调皮伤心抠鼻黑线微笑可爱奸笑震惊吓到了撇嘴大兵忍不住笑笑狂骂狂怒噢?鼓掌酷⊙﹏⊙b汗鄙视大哭嘿嘿

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 的头像
    过客:

    内容很有用,学习了。super cache 插件很好的

    2017-04-12 16:52 回复
  2. 的头像

    正在研究这个东西….

    2020-03-01 17:29 回复
官方微信
发表评论 返回顶部