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

編輯：狂族晨曦 來源：經(jīng)驗雜筆 日期：2016-04-17 閱讀： 6,758 次 4 條評論 » 百度已收錄

先森之前也提到過，CDN開啟網(wǎng)頁HTML緩存之后，一篇文章在沒有緩存的情況下，如果第一次訪問是先森自己訪問的（或者是其他已知訪客訪問的），那CDN緩存的時候，就會把先森登錄后顯示的界面緩存下來。

先森自己的頭像被緩存

也就是其他訪客訪問的時候，會顯示“內(nèi)容管理”、“登出”、評論框會顯示先森的頭像，前面兩個因為沒有登錄，所以點擊之后也沒有用，但是評論框顯示先森的頭像的時候，沒有更改昵稱和郵箱的選項，當訪客寫好評論提交的時候會提示“請輸入昵稱和郵箱”。雖然可以修改PHP代碼，讓昵稱和郵編填寫框都顯示出來，但是這樣是逃避問題，治標不治本。

免費資源部落的博主提醒先森，可能是開了瀏覽器緩存的問題。但是先森看了百度云加速的緩存設置，瀏覽器緩存最低設置時間都是兩個小時，沒有關閉瀏覽器緩存的選項。而且,先森仔細想了一下，覺得也不可能是瀏覽器緩存的問題，先森的問題是當先森自己訪問后一篇文章后，別人在自己的電腦上再訪問同樣的網(wǎng)頁后，會顯示和先森一樣的界面。而瀏覽器緩存，只會存在自己的電腦上。

解決問題

在網(wǎng)上搜索了半天解決方法都沒有找到類似的教程，最后終于在張戈博客找到了很適合的解決方案。就是用cookie來記住已知用戶，摒棄WordPress本身的記住用戶。

先森的想法是：

1.WordPress方面。用WP Super Cache設置訪客訪問到的頁面樣式。用之前介紹過的兩個設置“不要為已知用戶緩存”和“讓已知用戶匿名使他們?yōu)g覽的內(nèi)容是緩存文件”來使所有訪客訪問到的頁面都相同，并且不增加服務器的負擔。

WP Super Cache的兩個設置

2.CDN方面。通過了第一步的設置，CDN再設置緩存除后臺外的所有內(nèi)容，則不會再出現(xiàn)緩存到已知用戶頭像和昵稱的問題了。因為就算是站長登錄，網(wǎng)頁中顯示的也是未登錄的狀態(tài)。

3.JS方面。通過上面兩步設置之后，即使是以前在網(wǎng)站評論過的小伙伴，每次評論也都需要重新填寫昵稱和郵箱，這樣對用戶體驗不好，所以我們就要使用上文提到的將已知用戶信息存在用戶自己的設備cookie中，每次進入網(wǎng)站，會自動從cookie讀取填寫信息，這樣就不用勞煩已知用戶們自己填寫了。當然，昵稱郵箱這些并不是私密等級非常高的信息，我們沒必要用session了。

WordPress的WP Super Cache設置和CDN的設置很簡單，需要注意的是緩存的時間，這個根據(jù)自己網(wǎng)站來設定。關鍵的是JS代碼布置的問題。

張戈為我們分享了他的代碼，前后共有兩篇文章，前篇是舊的代碼分享及如何布置，后篇是改良之后的代碼分享：

• WordPress記住評論用戶信息的js版本，直接操作cookie無視緩存

• 解決JS操作Cookies出現(xiàn)的亂碼問題，修復WordPress評論亂碼

先森以為布置起來會很麻煩，但是經(jīng)過實踐后發(fā)現(xiàn)，布置起來還是很快的，只要你和張戈一樣，使用的是原生的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對內(nèi)容解碼
		    if(strName){document.getElementById("author").value=decodeURIComponent(strName);//從 cookie獲取填寫昵稱
			};
		    if(strEmail){document.getElementById("email").value=strEmail;};//從 cookie獲取填寫郵箱
                     //通過decodeURIComponent對內(nèi)容解碼
		    if(strHomePage){document.getElementById("url").value=decodeURIComponent(strHomePage);};//從 cookie獲取填寫網(wǎng)址
		    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();
//給評論提交按鈕綁定信息保存函數(shù)
    $("#respond #submit").click(function(){
       SaveRememberInfo();
    });
//給評論重置按鈕綁定信息移除函數(shù)
    $("#respond #reset").click(function(){
        RemoveRememberInfo();
    });
});
//保存信息函數(shù)
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對內(nèi)容進行url編碼
	SetCookie("author",encodeURIComponent(strName),365);
	SetCookie("email",strEmail,365);
        //通過encodeURIComponent對內(nèi)容進行url編碼
	SetCookie("url",encodeURIComponent(strHomePage),365);
	SetCookie("chkRemember",bolRemember,365);
 
}
//移除信息函數(shù)
function RemoveRememberInfo() {
	SetCookie("author",'',365);
	SetCookie("email",'',365);
	SetCookie("url",'',365);
	SetCookie("chkRemember",'false',365);
}

當然上面的代碼還是要根據(jù)你自己主題設置的標簽ID來更改。

新的問題

但是布置好之后，先森卻遇到了麻煩。cookie可以記錄郵箱和網(wǎng)址的信息，卻死活記錄不了昵稱的信息。在網(wǎng)頁cookie中看到，author的信息顯示的是undefined（未定義）。

昵稱author顯示undefined

先森前前后后折騰了幾個小時，百度各種搜索，甚至還在張戈博客留言問張哥。最后還是顯示在凌晨1點多，想要放棄的時候，發(fā)生了轉機。

先森之前測試cookie的時候，只填寫了昵稱和郵箱，但是昵稱author始終顯示undefined，而網(wǎng)址一欄的cookie顯示的是空值。開始先森沒有在意，后來一想，如果昵稱是沒有獲取到值的話，為什么不是和網(wǎng)址一樣，顯示的是空值呢？

這樣一想就醒悟了，應該是標簽的ID存在沖突了。果然，先森發(fā)現(xiàn)，文章頁中，標題下的編輯的<span>標簽，也用的author標簽。

標簽ID重復

把標簽的ID換了，刪除緩存，刷新查看。果然，該緩存的都緩存了。另外，下圖中的comment_author_****的三行代碼，是WordPress比較通用的comments-ajax.php中添加的，其實使用這種方法之后，這些cookie就可以刪掉了。但是先森覺得有點麻煩，還沒鉆研透，也就還沒刪。等以后鉆研透了再刪除，畢竟cookie信息也會影響網(wǎng)頁打開速度。

cookie測試成功

刪改代碼

經(jīng)過這樣一番整改之后，網(wǎng)站前端在設計的時候，增加的一些判斷管理員登錄的代碼都失效了，所以這類內(nèi)容就可以刪除了。

功能-登錄-管理網(wǎng)站

先森網(wǎng)站上比較突出的，就是登錄之后的管理按鈕，這些都可以直接刪除了。

<?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，就沒有什么問題。

經(jīng)過本文的設置之后，gavater頭像就不能實時顯示了。當然，也有解決辦法，實時顯示gavater頭像的教程很多。但先森不滿足，因為之前先森的gavater頭像都緩存到了自身服務器，先森不想使用多說等其他服務器。先森目前已經(jīng)實現(xiàn)了實時將訪客輸入的郵箱對應的gavater頭像緩存到自身服務器，并顯示出來，相關教程如下：

• 用cookie記住用戶信息后ajax實現(xiàn)實時顯示Gravatar頭像并實時緩存到本地

• 用cookie記住用戶信息后隱藏信息輸入框，優(yōu)化用戶體驗

cookie保存信息失敗，要檢查是否是因為標簽的ID沖突原因。