【WP优化】WordPress记住评论用户信息的js版本，直接操作cookie无视缓存-七木云

这两天一直在折腾博客的评论功能，原因是开启了百度云加速的 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=zhangge.net";
  }
  else{
    document.cookie = sName + "=" + escape(sValue)+ "; path=/;domain=zhangge.net";
  }
}
 
//*********************************************************
//*********************************************************
// 目的：    返回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=.zhangge.net"+
    ((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="<?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=.zhangge.net"+
    ((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="<?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 缓存都清空后，访问留言板可以看到多了一个勾选框：

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

四、注意事项

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

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

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

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

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

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

温馨提示：本文最后更新于2020-03-06 10:07:35，某些文章具有时效性，若有错误或已失效，请在下方留言或联系站长。

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

版权声明 1 本网站名称：七木云网络
2 本站永久网址：https://www.qimuyun.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系QQ3125752002进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END