专栏首页张戈的专栏WordPress记住评论用户信息的js版本,直接操作cookie无视缓存

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 建站程序的朋友,如果有需求可以留言,张戈可提供无偿修改服务!完毕!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS代码实现浏览器网页标题的动态切换,略微提高网站粘性

    前几天在微饭天空看到一个让我眼前一亮的分享,自己拿过来用了几天之后,感觉挺有意思,现在我略微改进一下并分享出来,方便更多人自定义成自己喜欢的内容。 ? 一、原...

    张戈
  • 借助腾讯云 CDN 开启全站 https 及问题解决分享

    腾讯云 CDN 的 https 功能目前还在邀请测试阶段,有幸用上了国内这个为数不多的特权。在借助腾讯云 CDN 开启全站 https 的过程中遇到了非常多的问...

    张戈
  • 借助腾讯云CDN开启全站https及问题解决分享

    “眼尖”的朋友,已经看到张戈博客已全面启用 https 了,当然这几天站点 502 也是常用的事情。不过到我写这篇文章为止,应该算是安定了下来。 自从百度推荐全...

    张戈
  • python 变量和作用域

    python 中,程序的变量并不是在哪个位置都可以访问的,访问权限决定于这个变量是在哪里赋值的。

    用户2398817
  • 了解 JS 作用域与作用域链

    不在任何函数内声明的变量(函数内省略var的也算全局)称作全局变量(global scope)

    书童小二
  • 百度分享工具不支持htts的解决方法

    herve
  • JavaScript 鼠标拖拽div 改变其大小

    转自: http://www.cnblogs.com/yushang/archive/2013/03/19/2968782.html

    acoolgiser
  • ant的高级使用,ant命令详解,ant打包,ant编译后打包去掉jar文件

    在日常的项目开发中,我们可以经常性的需要打包测试,尤其是开发环境是windows,而实际环境则是linux。 这样的话,很...

    业余草
  • delegates - 委托模式的简单实现

    最近发现一个有意思的模块 - delegates,它由大名鼎鼎的 TJ 所写,可以帮我们方便快捷地使用设计模式当中的委托模式(Delegation Patte...

    IMWeb前端团队
  • 【一起来烧脑】入门ES6体系

    不需要function关键字来创建函数 省略return关键字 继承当前上下文的 this 关键字

    达达前端

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动