用cookie解决网站开启CDN缓存之后已知用户头像昵称被缓存等系列问题

编辑：狂族晨曦 来源：经验杂笔 日期：2016-04-17 阅读： 5,691 次 4 条评论 » 百度已收录

先森之前也提到过，CDN开启网页HTML缓存之后，一篇文章在没有缓存的情况下，如果第一次访问是先森自己访问的（或者是其他已知访客访问的），那CDN缓存的时候，就会把先森登录后显示的界面缓存下来。

先森自己的头像被缓存

也就是其他访客访问的时候，会显示“内容管理”、“登出”、评论框会显示先森的头像，前面两个因为没有登录，所以点击之后也没有用，但是评论框显示先森的头像的时候，没有更改昵称和邮箱的选项，当访客写好评论提交的时候会提示“请输入昵称和邮箱”。虽然可以修改PHP代码，让昵称和邮编填写框都显示出来，但是这样是逃避问题，治标不治本。

免费资源部落的博主提醒先森，可能是开了浏览器缓存的问题。但是先森看了百度云加速的缓存设置，浏览器缓存最低设置时间都是两个小时，没有关闭浏览器缓存的选项。而且,先森仔细想了一下，觉得也不可能是浏览器缓存的问题，先森的问题是当先森自己访问后一篇文章后，别人在自己的电脑上再访问同样的网页后，会显示和先森一样的界面。而浏览器缓存，只会存在自己的电脑上。

解决问题

在网上搜索了半天解决方法都没有找到类似的教程，最后终于在张戈博客找到了很适合的解决方案。就是用cookie来记住已知用户，摒弃WordPress本身的记住用户。

先森的想法是：

1.WordPress方面。用WP Super Cache设置访客访问到的页面样式。用之前介绍过的两个设置“不要为已知用户缓存”和“让已知用户匿名使他们浏览的内容是缓存文件”来使所有访客访问到的页面都相同，并且不增加服务器的负担。

WP Super Cache的两个设置

2.CDN方面。通过了第一步的设置，CDN再设置缓存除后台外的所有内容，则不会再出现缓存到已知用户头像和昵称的问题了。因为就算是站长登录，网页中显示的也是未登录的状态。

3.JS方面。通过上面两步设置之后，即使是以前在网站评论过的小伙伴，每次评论也都需要重新填写昵称和邮箱，这样对用户体验不好，所以我们就要使用上文提到的将已知用户信息存在用户自己的设备cookie中，每次进入网站，会自动从cookie读取填写信息，这样就不用劳烦已知用户们自己填写了。当然，昵称邮箱这些并不是私密等级非常高的信息，我们没必要用session了。

WordPress的WP Super Cache设置和CDN的设置很简单，需要注意的是缓存的时间，这个根据自己网站来设定。关键的是JS代码布置的问题。

张戈为我们分享了他的代码，前后共有两篇文章，前篇是旧的代码分享及如何布置，后篇是改良之后的代码分享：

• WordPress记住评论用户信息的js版本，直接操作cookie无视缓存

• 解决JS操作Cookies出现的乱码问题，修复WordPress评论乱码

先森以为布置起来会很麻烦，但是经过实践后发现，布置起来还是很快的，只要你和张戈一样，使用的是原生的WordPress评论。部署代码很简单，将下面的代码加入主题的comments-ajax.js中，或者其他js里面：

/*
*WordPress记住评论用户信息的js版本，直接操作cookie无视缓存
*https://zhangge.net/4538.html
*https://zhangge.net/4684.html
*/
//设置Cookie
function SetCookie(sName, sValue,iExpireDays) {
	if (iExpireDays){
		var dExpire = new Date();
		dExpire.setTime(dExpire.getTime()+parseInt(iExpireDays*24*60*60*1000));
		document.cookie = sName + "=" + escape(sValue) + "; expires=" + dExpire.toGMTString()+ "; path=/;domain=.capjsj.cn";
	}
	else{
		document.cookie = sName + "=" + escape(sValue)+ "; path=/;domain=.capjsj.cn";
	}
}
// 目的：    返回Cookie
function GetCookie(sName) {
	var arr = document.cookie.match(new RegExp("(^| )"+sName+"=([^;]*)(;|$)"));
	if(arr !=null){return unescape(arr[2])};
	return null;
 
}
//加载用户信息
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;};
	    }
	    if(GetCookie("username")){
		    document.getElementById("author").value=unescape(GetCookie("username"));
	    }
    }	
}
//通过jQuery ready在页面加载时自动从cookies中载入已保存的用户信息
jQuery(document).ready(function($){
       LoadRememberInfo();
//给评论提交按钮绑定信息保存函数
    $("#respond #submit").click(function(){
       SaveRememberInfo();
    });
//给评论重置按钮绑定信息移除函数
    $("#respond #reset").click(function(){
        RemoveRememberInfo();
    });
});
//保存信息函数
function SaveRememberInfo() {
	var strName=document.getElementById("author").value;
	var strEmail=document.getElementById("email").value;
	var strHomePage=document.getElementById("url").value;
	var bolRemember=document.getElementById("saveme").checked;
        //通过encodeURIComponent对内容进行url编码
	SetCookie("author",encodeURIComponent(strName),365);
	SetCookie("email",strEmail,365);
        //通过encodeURIComponent对内容进行url编码
	SetCookie("url",encodeURIComponent(strHomePage),365);
	SetCookie("chkRemember",bolRemember,365);
 
}
//移除信息函数
function RemoveRememberInfo() {
	SetCookie("author",'',365);
	SetCookie("email",'',365);
	SetCookie("url",'',365);
	SetCookie("chkRemember",'false',365);
}

当然上面的代码还是要根据你自己主题设置的标签ID来更改。

新的问题

但是布置好之后，先森却遇到了麻烦。cookie可以记录邮箱和网址的信息，却死活记录不了昵称的信息。在网页cookie中看到，author的信息显示的是undefined（未定义）。

昵称author显示undefined

先森前前后后折腾了几个小时，百度各种搜索，甚至还在张戈博客留言问张哥。最后还是显示在凌晨1点多，想要放弃的时候，发生了转机。

先森之前测试cookie的时候，只填写了昵称和邮箱，但是昵称author始终显示undefined，而网址一栏的cookie显示的是空值。开始先森没有在意，后来一想，如果昵称是没有获取到值的话，为什么不是和网址一样，显示的是空值呢？

这样一想就醒悟了，应该是标签的ID存在冲突了。果然，先森发现，文章页中，标题下的编辑的<span>标签，也用的author标签。

标签ID重复

把标签的ID换了，删除缓存，刷新查看。果然，该缓存的都缓存了。另外，下图中的comment_author_****的三行代码，是WordPress比较通用的comments-ajax.php中添加的，其实使用这种方法之后，这些cookie就可以删掉了。但是先森觉得有点麻烦，还没钻研透，也就还没删。等以后钻研透了再删除，毕竟cookie信息也会影响网页打开速度。

cookie测试成功

删改代码

经过这样一番整改之后，网站前端在设计的时候，增加的一些判断管理员登录的代码都失效了，所以这类内容就可以删除了。

功能-登录-管理网站

先森网站上比较突出的，就是登录之后的管理按钮，这些都可以直接删除了。

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
            
<p  class="categoryName1"><?php _e('Meta'); ?></p>
            <img src="<?php bloginfo('template_url'); ?>/images/news_fenge2.jpg" alt="分段图" title="分段图">
<ul class="categoryName2 login_ul">
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
    <?php endif; ?>

总结

用cookie的方式记录访客信息，访客信息会放在访客自己的设备上，只要访客自身不禁用cookie，就没有什么问题。

经过本文的设置之后，gavater头像就不能实时显示了。当然，也有解决办法，实时显示gavater头像的教程很多。但先森不满足，因为之前先森的gavater头像都缓存到了自身服务器，先森不想使用多说等其他服务器。先森目前已经实现了实时将访客输入的邮箱对应的gavater头像缓存到自身服务器，并显示出来，相关教程如下：

• 用cookie记住用户信息后ajax实现实时显示Gravatar头像并实时缓存到本地

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

cookie保存信息失败，要检查是否是因为标签的ID冲突原因。