用cookie解決網(wǎng)站開啟CDN緩存之后已知用戶頭像昵稱被緩存等系列問題
編輯：狂族晨曦 來源：經(jīng)驗雜筆 日期：2016-04-17 閱讀： 6,755 次 4 條評論 » 百度已收錄
先森之前也提到過，CDN開啟網(wǎng)頁HTML緩存之后，一篇文章在沒有緩存的情況下，如果第一次訪問是先森自己訪問的（或者是其他已知訪客訪問的），那CDN緩存的時候，就會把先森登錄后顯示的界面緩存下來。
先森自己的頭像被緩存
也就是其他訪客訪問的時候，會顯示“內(nèi)容管理”、“登出”、評論框會顯示先森的頭像，前面兩個因為沒有登錄，所以點(diǎn)擊之后也沒有用，但是評論框顯示先森的頭像的時候，沒有更改昵稱和郵箱的選項，當(dāng)訪客寫好評論提交的時候會提示“請輸入昵稱和郵箱”。雖然可以修改PHP代碼，讓昵稱和郵編填寫框都顯示出來，但是這樣是逃避問題，治標(biāo)不治本。
免費(fèi)資源部落的博主提醒先森，可能是開了瀏覽器緩存的問題。但是先森看了百度云加速的緩存設(shè)置，瀏覽器緩存最低設(shè)置時間都是兩個小時，沒有關(guān)閉瀏覽器緩存的選項。而且,先森仔細(xì)想了一下，覺得也不可能是瀏覽器緩存的問題，先森的問題是當(dāng)先森自己訪問后一篇文章后，別人在自己的電腦上再訪問同樣的網(wǎng)頁后，會顯示和先森一樣的界面。而瀏覽器緩存，只會存在自己的電腦上。
解決問題
在網(wǎng)上搜索了半天解決方法都沒有找到類似的教程，最后終于在張戈博客找到了很適合的解決方案。就是用cookie來記住已知用戶，摒棄WordPress本身的記住用戶。
先森的想法是：
1.WordPress方面。用WP Super Cache設(shè)置訪客訪問到的頁面樣式。用之前介紹過的兩個設(shè)置“不要為已知用戶緩存”和“讓已知用戶匿名使他們?yōu)g覽的內(nèi)容是緩存文件”來使所有訪客訪問到的頁面都相同，并且不增加服務(wù)器的負(fù)擔(dān)。
WP Super Cache的兩個設(shè)置
2.CDN方面。通過了第一步的設(shè)置，CDN再設(shè)置緩存除后臺外的所有內(nèi)容，則不會再出現(xiàn)緩存到已知用戶頭像和昵稱的問題了。因為就算是站長登錄，網(wǎng)頁中顯示的也是未登錄的狀態(tài)。
3.JS方面。通過上面兩步設(shè)置之后，即使是以前在網(wǎng)站評論過的小伙伴，每次評論也都需要重新填寫昵稱和郵箱，這樣對用戶體驗不好，所以我們就要使用上文提到的將已知用戶信息存在用戶自己的設(shè)備cookie中，每次進(jìn)入網(wǎng)站，會自動從cookie讀取填寫信息，這樣就不用勞煩已知用戶們自己填寫了。當(dāng)然，昵稱郵箱這些并不是私密等級非常高的信息，我們沒必要用session了。
WordPress的WP Super Cache設(shè)置和CDN的設(shè)置很簡單，需要注意的是緩存的時間，這個根據(jù)自己網(wǎng)站來設(shè)定。關(guān)鍵的是JS代碼布置的問題。
張戈為我們分享了他的代碼，前后共有兩篇文章，前篇是舊的代碼分享及如何布置，后篇是改良之后的代碼分享：
先森以為布置起來會很麻煩，但是經(jīng)過實(shí)踐后發(fā)現(xiàn)，布置起來還是很快的，只要你和張戈一樣，使用的是原生的WordPress評論。部署代碼很簡單，將下面的代碼加入主題的comments-ajax.js中，或者其他js里面：
/*
*WordPress記住評論用戶信息的js版本，直接操作cookie無視緩存
*https://zhangge.net/4538.html
*https://zhangge.net/4684.html
*/
//設(shè)置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)容進(jìn)行url編碼
SetCookie("author",encodeURIComponent(strName),365);
SetCookie("email",strEmail,365);
//通過encodeURIComponent對內(nèi)容進(jìn)行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);
}
當(dāng)然上面的代碼還是要根據(jù)你自己主題設(shè)置的標(biāo)簽ID來更改。
新的問題
但是布置好之后，先森卻遇到了麻煩。cookie可以記錄郵箱和網(wǎng)址的信息，卻死活記錄不了昵稱的信息。在網(wǎng)頁cookie中看到，author的信息顯示的是undefined（未定義）。
昵稱author顯示undefined
先森前前后后折騰了幾個小時，百度各種搜索，甚至還在張戈博客留言問張哥。最后還是顯示在凌晨1點(diǎn)多，想要放棄的時候，發(fā)生了轉(zhuǎn)機(jī)。
先森之前測試cookie的時候，只填寫了昵稱和郵箱，但是昵稱author始終顯示undefined，而網(wǎng)址一欄的cookie顯示的是空值。開始先森沒有在意，后來一想，如果昵稱是沒有獲取到值的話，為什么不是和網(wǎng)址一樣，顯示的是空值呢？
這樣一想就醒悟了，應(yīng)該是標(biāo)簽的ID存在沖突了。果然，先森發(fā)現(xiàn)，文章頁中，標(biāo)題下的編輯的<span>標(biāo)簽，也用的author標(biāo)簽。
標(biāo)簽ID重復(fù)
把標(biāo)簽的ID換了，刪除緩存，刷新查看。果然，該緩存的都緩存了。另外，下圖中的comment_author_****的三行代碼，是WordPress比較通用的comments-ajax.php中添加的，其實(shí)使用這種方法之后，這些cookie就可以刪掉了。但是先森覺得有點(diǎn)麻煩，還沒鉆研透，也就還沒刪。等以后鉆研透了再刪除，畢竟cookie信息也會影響網(wǎng)頁打開速度。
cookie測試成功
刪改代碼
經(jīng)過這樣一番整改之后，網(wǎng)站前端在設(shè)計的時候，增加的一些判斷管理員登錄的代碼都失效了，所以這類內(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; ?>
總結(jié)
用cookie的方式記錄訪客信息，訪客信息會放在訪客自己的設(shè)備上，只要訪客自身不禁用cookie，就沒有什么問題。
經(jīng)過本文的設(shè)置之后，gavater頭像就不能實(shí)時顯示了。當(dāng)然，也有解決辦法，實(shí)時顯示gavater頭像的教程很多。但先森不滿足，因為之前先森的gavater頭像都緩存到了自身服務(wù)器，先森不想使用多說等其他服務(wù)器。先森目前已經(jīng)實(shí)現(xiàn)了實(shí)時將訪客輸入的郵箱對應(yīng)的gavater頭像緩存到自身服務(wù)器，并顯示出來，相關(guān)教程如下：
cookie保存信息失敗，要檢查是否是因為標(biāo)簽的ID沖突原因。
轉(zhuǎn)載請注明出處來自http://www.cnidcc.cn/ycookiejjwzkqcdnhczhyzyhtxncbhcdxlwt.html
川公網(wǎng)安備 51011202000104號
我也是啟用緩存插件后，用戶只要留過言都被判斷為已登陸，結(jié)果對于已留言用戶就不緩存了
試試
大佬，如果站點(diǎn)用了pjax該怎么辦啊？？？
評論區(qū)的cookies怎么設(shè)置一年過期？