网站建设

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

Jager · 11月14日 · 2014年 · · · 1554次已读

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

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

看了下乱码的组成,发现已被被转成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=.zhang.ge";
	}
	else{
		document.cookie = sName + "=" + escape(sValue)+ "; path=/;domain=.zhang.ge";
	}
}
// 目的:    返回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);
}

这样改进之后,浏览器将会以url编码来保存用户信息,待读取的时候再进行url解码,从而解决偶尔产生的乱码问题:

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

本文仅分享解决cookies乱码的思路,如何部署该功能请查看张戈博客之前的文章:https://zhang.ge/4538.html

8 条回应
  1. 飞哥 2014-11-14 · 16:57

    进入后台。Warning: unlink(C:\WINDOWS\TEMP/d480aa4800f480480480480480c480ca480db480480480480480480c48004804800480s480480drG480) [function.unlink]: Permission denied in D:\wwwroot\hfwhcm\wwwroot\wp-admin\includes\file.php on line 457
    请问是什么问题

  2. 松果 2014-11-14 · 20:44

    签到成功!签到时间:下午8:43:49,每日签到,生活更精彩哦~

  3. 歌词找歌名 2014-11-14 · 21:33

    评论一下看是否会乱码!

  4. 极品飞鸽 2014-11-15 · 19:42

    你对主题做了很多修改,感觉好多高大上的东西

  5. 学习学习 2016-3-23 · 10:46

    学习一下COOKIES的处理

  6. 狂族晨曦 2016-4-13 · 22:26

    张哥,JS我不太懂,为什么使用了本文中的代码之后,邮箱和网址都可以被cookie保存,但是在cookie中”author”对应的”undefined”,昵称不能被记录呢?comment_author_*******也是有值的。

    • 狂族晨曦 2016-4-14 · 1:49

      鼓捣了几个小时,发现自己坑自己了。以前啥也不知道,把文章页编辑标签的ID设置的也是”author”,这才导致的昵称那里显示未定义。

  7. 闲鱼 2016-5-8 · 12:47

    不错,感谢分享