用cookie解決網站開啟CDN緩存之后已知用戶頭像昵稱被緩存等系列問題
編輯：狂族晨曦 來源：經驗雜筆 日期：2016-04-17 閱讀： 6,874 次 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評論。部署代碼很簡單，將下面的代碼加入主題的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保存信息失敗，要檢查是否是因為標簽的ID沖突原因。
轉載請注明出處來自http://www.cnidcc.cn/ycookiejjwzkqcdnhczhyzyhtxncbhcdxlwt.html
川公網安備 51011202000104號
我也是啟用緩存插件后，用戶只要留過言都被判斷為已登陸，結果對于已留言用戶就不緩存了
試試
大佬，如果站點用了pjax該怎么辦啊？？？
評論區的cookies怎么設置一年過期？