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 名称即可生效。
非 WordPress 建站程序的朋友,如果有需求可以留言,张戈可提供无偿修改服务!完毕!
- Spring Cloud构建微服务架构:服务网关(路由配置)【Dalston版】
- SpringCloud实战小贴士:Zuul的路径匹配
- 程序员你为什么这么累【续】:编码习惯之参数校验和国际化规范
- 程序员你为什么这么累【续】:编码习惯-函数编写建议
- 那些年,我们一起碰到过的骗局
- Spring Security (五) 动手实现一个IP_Login
- 史上最全Linux提权后获取敏感信息方法
- Spring Security (四) 核心过滤器源码分析
- Spring Security (三) 核心配置解读
- Spring Cloud配置中心获取不到最新配置信息的问题
- 总是听别人说响应式布局,原来这么简单
- Spring Cloud Zuul重试机制探秘
- Eureka中RetryableClientQuarantineRefreshPercentage参数探秘
- Edgware.RC1中ZuulFallbackProvider的改进
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- java安全编码指南之:lock和同步的正确使用
- 前端设计模式之工厂模式
- 前端构建 DevOps - Gitlab Api
- 重要性抽样方法实例分享
- K8S 生态周报| Helm v3.3.4 发布
- 项目实战|缓存处理
- 前端构建 DevOps - 搭建 DevOps 基础平台(上)
- 线剪裁算法简介
- 使用OpenCV和Python生成电影条形码
- 前端构建 DevOps - 搭建 DevOps 基础平台(中)
- 从 0 到 1 node 项目管理系统:搭建基础平台(下)
- Fiddler是个问题少女,又作又可招人爱
- devOps:构建篇-Jenkins
- H5 基础脚手架:极速构建项目
- 从 0 到 1 的项目管理系统:脚手架篇 - H5 基础脚手架