成航先森 成航先森

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

 

经验杂笔

分段图

最新文章

经验杂笔
当前位置: 首页 » 大学杂谈 » 经验杂笔 » 用cookie解决网站开启CDN缓存之后已知用户头像昵称被缓存等系列问题

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

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

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

先森自己的头像被缓存 -1

先森自己的头像被缓存

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

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

解决问题

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

先森的想法是:

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

WP Super Cache的两个设置 -2

WP Super Cache的两个设置

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

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

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

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

先森以为布置起来会很麻烦,但是经过实践后发现,布置起来还是很快的,只要你和张戈一样,使用的是原生的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 -3

昵称author显示undefined

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

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

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

标签ID重复 -4

标签ID重复

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

cookie测试成功 -5

cookie测试成功

删改代码

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

功能-登录-管理网站 -6

功能-登录-管理网站

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

<?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保存信息失败,要检查是否是因为标签的ID冲突原因。

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

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

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

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

    我也是启用缓存插件后,用户只要留过言都被判断为已登陆,结果对于已留言用户就不缓存了

    2016-10-01 11:21 回复
官方微信
发表评论 返回顶部