书签网 书签网
广告位出租
立即入驻
本站文字广告内测 10元/月
大量收录新站，搜索引擎收录很快

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

建站笔记2年前 (2023)发布 小萝卜头
342 0 0
这两天一直在折腾博客的评论功能，原因是开启了百度云加速的 html 缓存，导致原有的记住评论者信息的功能失效了，每次刷新文章页面，用户信息都会清空。
于是就折腾了前几天的《博客文章重新启用评论，附一键填写评论中用户信息代码生成工具》一文，弄得好像是那么一回事。但是，还是没有从根本上解决问题啊！昨天，接到博友黄启福的建议：通过 js 来操作 cookies，让浏览器记住用户信息即可。看了下 W3chool 资料，感觉是可行的，于是上午开始折腾 js 代码，并成功搞定了这个功能！再次感谢黄启福朋友的建议！

下面分享这个 js 代码，补充 WordPress 在缓存处理方面的不足：

先前置说明一下，此 js 主要用于解决 WordPress 在百度云加速等 CDN 缓存开启下无法保存用户信息的问题，省的某些人不仔细看内容就别说啥“WordPress 是可以记住个人信息的笑话”！

一、ZBlog 移植

①、添加 JS 代码

之前发现 ZBlog 的记住用户信息是用 js 实现的，就从中扒了出来，修改了下，以兼容 WordPress。代码如下，将以下代码加入到 WordPress 的 js 当中即可，比如加入到 comments-ajax.js 的最后：

//*********************************************************
//*********************************************************
// 目的：    设置 Cookie
// 输入：    sName, sValue,iExpireDays
// 返回：    无
//*********************************************************
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=zhang.ge";
 }
 else{
 document.cookie = sName + "=" + escape(sValue)+ "; path=/;domain=zhang.ge";
 }
}

//*********************************************************
//*********************************************************
// 目的：    返回 Cookie
// 输入：    Name
// 返回：    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"){
     if(strName){document.getElementById("author").value=decodeURIComponent(strName);};
     if(strEmail){document.getElementById("email").value=strEmail;};
     if(strHomePage){document.getElementById("url").value=decodeURIComponent(strHomePage);};
     if(bolRemember){document.getElementById("saveme").checked=bolRemember;};
     }

     if(GetCookie("username")){
     document.getElementById("author").value=unescape(GetCookie("username"));
     }
    }
}

//*********************************************************
//*********************************************************
// 目的：    保存信息
// 输入：    无
// 返回：    无
//*********************************************************
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;

 SetCookie("author",encodeURIComponent(strName),365);
 SetCookie("email",strEmail,365);
 SetCookie("url",encodeURIComponent(strHomePage),365);
 SetCookie("chkRemember",bolRemember,365);

}
//*********************************************************
//*********************************************************
// 目的：    移除信息
// 输入：    无
// 返回：    无
//*********************************************************
function RemoveRememberInfo() {
 SetCookie("author",'',365);
 SetCookie("email",'',365);
 SetCookie("url",'',365);
 SetCookie("chkRemember",'false',365);

}
//*********************************************************
//*********************************************************
// 目的：    生效代码
// 输入：    无
// 返回：    无
//*********************************************************
$(document).ready(function(){
       LoadRememberInfo();
    $("#respond #submit").click(function(){
       SaveRememberInfo();
    });
    $("#respond #reset").click(function(){
        RemoveRememberInfo();
    });
});

Ps：如果没有做 ajax 评论，就没有 comments-ajax.js，这时你可以将以上代码保存为 saveinfo.js ，然后引入到前台即可。

②、修改 comments.php

编辑主题的 comments.php 文件，找到提交留言的按钮代码，在合适的位置添加勾选框：

<input type="checkbox" id="saveme" value="saveme" checked="checked" style="margin-left:20px;" /><label for="comment_mail_notify">记住我,下次回复时无需重新输入个人信息</label></p>

最后的代码大致如下（供参考）：

....以上省略....
<div class="submitted">
   <input class="submit" name="submit" type="submit" id="submit" tabindex="5" value="提交留言" />
   <input class="reset" name="reset" type="reset" id="reset" tabindex="6" value="<?php esc_attr_e( '重写' ); ?>"/>
   <?php comment_id_fields(); ?>
   <input type="checkbox" id="saveme" value="saveme" checked="checked" style="margin-left:20px;" /><label for="saveme">记住我,下次回复时无需重新输入个人信息</label></p>
</div>
...以下省略...

现在，博客可以放心的开启前台整站 CDN 加速了，用户只要认真提交过一次评论，那么下次再来访问任意页面，将会自动填写评论用户信息。

下面隐藏内容是张戈之前自己写的 js 代码，使用感觉没有 ZBlog 的完善感兴趣的可以参考看看  

二、自动保存

不提供是否保存信息的选项，提交评论的时候，会自动保存用户信息到本地 cookies 当中，下次再访问这个页面的时候，将自动填写用户信息，整个过程用户无需干涉。

Ps：无勾选版本，主要是方便一些不太会改代码的站长，只要在页面引入这个 js 就行了，无需过多修改。

①、将如下代码保存为 saveinfo.js，并上传到主题目录。

function getCookie(c_info){
 if (document.cookie.length>0){ 
 c_start=document.cookie.indexOf(c_info + "=")
 if (c_start!=-1){ 
 c_start=c_start + c_info.length+1 
 c_end=document.cookie.indexOf(";",c_start)
 if (c_end==-1) {
 c_end=document.cookie.length;
 }
 return unescape(document.cookie.substring(c_start,c_end));
 } 
 }
 return null;
}
function removeCookie(name) { 
    var cval=getCookie(name); 
    if(cval!=null){
       setCookie(name,cval,-1);
 }
} 
function setCookie(c_info,value,expiredays){
    var exdate=new Date()
    exdate.setDate(exdate.getDate()+expiredays)
    //请将 domain 改成你的域名
    document.cookie=c_info+ "=" +escape(value)+";path=/;domain=.zhang.ge"+
    ((typeof expiredays=="undefined") ? "" : "; expires="+exdate.toGMTString());
}
function checkCookie(){
 $("#comment-author-info input[type="text"]").each(function(){
 var val = getCookie(this.name);
 this.value = val;
 });

}
function goSubmit(){
 $("#comment-author-info input[type="text"]").each(function(){
 removeCookie(this.name);
 setCookie(this.name,this.value,365);
 });
}
function removeck(){
 $("#comment-author-info input[type="text"]").each(function(){
 removeCookie(this.name);
 }); 
}
$(document).ready(function(){
    checkCookie();
$("#respond #submit").click(function(){
    goSubmit();
    });
$("#respond #reset").click(function(){
    removeck();
    });
});

②、然后，在主题 head 部分载入这个 js 即可：

<script type="text/javascript" src="https://zhang.ge/<?php bloginfo("template_directory'); ?>/saveinfo.js"></script>

三、自行选择

功能区别：在上述功能的基础上，新增一个勾选框，让用户选择是否保存信息。

设计初衷：因为用户可能用的是他人电脑，并不想让邮箱、网址等信息保留在该电脑上。所以，这是注重用户体验的一个版本，推荐使用！

①、同样的，将如下代码保存为 saveinfo.js，并上传到主题目录：

function getCookie(c_info){
 if (document.cookie.length>0){ 
 c_start=document.cookie.indexOf(c_info + "=")
 if (c_start!=-1){ 
 c_start=c_start + c_info.length+1 
 c_end=document.cookie.indexOf(";",c_start)
 if (c_end==-1) {
 c_end=document.cookie.length;
 }
 return unescape(document.cookie.substring(c_start,c_end));
 } 
 }
 return null;
}
function removeCookie(name) { 
    var cval=getCookie(name); 
    if(cval!=null){
       setCookie(name,cval,-1);
 }
} 
function setCookie(c_info,value,expiredays){
    var exdate=new Date()
    exdate.setDate(exdate.getDate()+expiredays)
    //请将 domain 的值修改为你的域名
    document.cookie=c_info+ "=" +escape(value)+";path=/;domain=.zhang.ge"+
    ((typeof expiredays=="undefined") ? "" : "; expires="+exdate.toGMTString());
}
//调用 cookie 自动填表
function checkCookie(){
 $("#comment-author-info input[type="text"]").each(function(){
 var val = getCookie(this.name);
 this.value = val;
 });

}
//提交时将信息写入 cookie
function goSubmit(){
        //先判断是否勾选了保存信息按钮
 if($("#saveme").is(":checked")){
 $("#comment-author-info input[type="text"]").each(function(){
 removeCookie(this.name);
 setCookie(this.name,this.value,365);
 });
 } else {
     $("#comment-author-info input[type="text"]").each(function(){
 removeCookie(this.name);
 });
    }
}

function removeck(){
 $("#comment-author-info input[type="text"]").each(function(){
 removeCookie(this.name);
 });
}

$(document).ready(function(){
    checkCookie();
    $("#respond #reset").click(function(){
        removeck();
    });
});

②、然后，在主题 head 部分载入这个 js：

<script type="text/javascript" src="https://zhang.ge/<?php bloginfo("template_directory'); ?>/saveinfo.js"></script>

③、修改 comments.php

编辑主题的 comments.php 文件，找到提交留言的按钮代码，在合适的位置添加勾选框：

<input type="checkbox" id="saveme" value="saveme" checked="checked" style="margin-left:20px;" /><label for="comment_mail_notify">记住我,下次回复时无需重新输入个人信息</label></p>

最后的代码大致如下（供参考）：

....以上省略....
<div class="submitted">
   <input class="submit" name="submit" type="submit" id="submit" tabindex="5" value="提交留言" onclick="goSubmit()" />
   <input class="reset" name="reset" type="reset" id="reset" tabindex="6" value="<?php esc_attr_e( '重写' ); ?>"/>
   <?php comment_id_fields(); ?>
   <input type="checkbox" id="saveme" value="saveme" checked="checked" style="margin-left:20px;" /><label for="comment_mail_notify">记住我,下次回复时无需重新输入个人信息</label></p>
</div>
...以下省略...

把网站的所有缓存和 CDN 缓存都清空后，访问留言板可以看到多了一个勾选框：

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

现在，博客可以放心的开启前台整站 CDN 加速了，用户只要认真提交过一次评论，那么下次再来访问任意页面，将会自动填写评论用户信息。

四、注意事项

①、使用前请务必正确修改 js 代码中的 domian 值，否则无法操作 cookies；

②、如果你了解 js，可以将 js 代码与网站的其他 js 合并，减少页面的 js 请求，比如与 comments-ajax.js 合并；

③、已记住的网站，如需修改更新用户信息，只需输入新的信息，重新提交一次即可刷新 cookie；

④、如果评论框中存在重置（id 为 reset）的按钮，那么只要点击重置就能清除已保存的用户信息；

⑤、该功能只在用户电脑本地生效，不会带来任何安全隐私及隐患；

⑥、以上 js 只对 WordPress 生效，其他建站程序可以通过修改代码中的 ID 名称即可生效。

非 WordPress 建站程序的朋友，如果有需求可以留言，张戈可提供无偿修改服务！完毕！

收录于{张戈博客} 原文链接原文链接

© 版权声明
文章版权归作者所有，未经允许请勿转载。

相关文章

SSL证书，部署及相关知识
小萝卜头
45
百度站长平台robots工具升级后的新发现
小萝卜头
961
如何正确配置CDN缓存规则，避免越用越慢的尴尬
小萝卜头
312
简单的判断 WordPress 的登录页面的代码，我改了5个版本，最后 WordPress 自己支持了
小萝卜头
430
WordPress 查询参数（WordPress Query Vars）完全列表
小萝卜头
532
张戈博客惊现WordPress恶意代码，各位WP博主要注意下了！
小萝卜头
345

暂无评论

暂无评论...

热门文章

宁海，小众宝藏城市的惊喜之旅
60
书签网（ishuqian.com），是集网址、资源、资讯于一体的导航站，简约优雅的界面风格，全面的前端用户功能，简单的模块化配置，欢迎您的体验
  • 加入我们
  • 广告合作
  • 关于书签

    • Copyright © 2014-2024 书签网 | Theme By OneNav |  国旗赣ICP备2022011209号  | 赣公网安备 44040302000165号 | 由：又拍云联盟 和酷盾安全酷盾安全 提供CDN云存储和防护服务