解决JS操作Cookies出现的乱码问题，修复WordPress评论乱码

张戈

发布于 2018-03-23 07:06:55

2.7K00

代码可运行

文章被收录于专栏：张戈的专栏张戈的专栏

运行总次数：0

代码可运行

为了解决博客纯静态之后无法记住用户信息的问题，我将这个功能改成 JS 操作 Cookie 的方式，将用户信息直接保存到用户本地 cookies 当中，从而脱离 php 不再受缓存的影响。不过，近来偶尔发现有个别评论乱码了，如下所示：

看了下乱码的组成，发现已被被转成 URL 编码格式。本以为是我上次自己写的 js 不够完善的原因，于是我从 ZBLOG 中移植了记住评论信息的 JS 代码。

更改后，观察了几天，发现还是偶尔会有这种 URL 转码现象，于是决心解决一下这个问题。

考虑了半天，发现问题其实很好解决，只要在保存 cookies 的时候先进行 url 转码，然后再取出的时候在进行 url 解码就行了！有了思路，问题很快就得到了解决！

在 js 中使用 encodeURIComponent 和 decodeURIComponent，前者是将内容进行 url 编码，后者则是将 url 解码。

于是，将记住评论信息的 JS 稍作修改即可搞定(JS 原代码来自 ZBLOG-ASP)：

//设置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=.zhangge.net";
	}
	else{
		document.cookie = sName + "=" + escape(sValue)+ "; path=/;domain=.zhangge.net";
	}
}
// 目的：    返回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);};
		    if(strEmail){document.getElementById("email").value=strEmail;};
                     //通过decodeURIComponent对内容解码
		    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"));
	    }
    }	
}
//通过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);
}