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

为了解决博客纯静态之后无法记住用户信息的问题,我将这个功能改成 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);
}

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

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Web 开发

ckeditor 从入门到放弃

通过 CKEDITOR.plugins.add方法添加插件,第一个参数为插件名,后面为参数列表。

25900
来自专栏葡萄城控件技术团队

MVC5:使用Ajax和HTML5实现文件上传功能

引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能...

680100
来自专栏林德熙的博客

win10 uwp 如何创建修改保存位图 创建保存图片在 Image 控件使用WriteableBitmap 转换通过读写像素转换 CanvasBitmap

在 UWP 使用底层的图像渲染就是使用 Softwarebitmap ,这个类提供直接数据修改,可以使用这个类进行软渲染。实际上 Softwarebitmap ...

44510
来自专栏每日一篇技术文章

go - os包 彻头彻尾用法使用

os包提供了操作系统函数的不依赖平台的接口。设计为Unix风格的,虽然错误处理是go风格的;失败的调用会返回错误值而非错误码。通常错误值里包含更多信息。例如,如...

32660
来自专栏24K纯开源

一款批量修改AE模板的工具

一、需求分析      对于视频后期剪辑及相关从业人员来说,AE(After Effects)模板效果是一个不错的开始点。在模板效果的基础上,可以很快的做出各种...

41370
来自专栏Petrichor的专栏

nano:基本操作

27640
来自专栏大内老A

通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用

较之面向最终消费者的网站,企业级Web应用对用户体验的要求要低一些。不过客户对“用户体验”的要求是“与日俱增”的,很多被“惯坏了”的用户已经不能忍受Postba...

26490
来自专栏前端吧啦吧啦

手把手教你全家桶之React(二)

12830
来自专栏hbbliyong

WPF命令(Command)介绍、命令和数据绑定集成应用

要开始使用命令,必须做三件事:                                               一:定义一个命令       ...

58130
来自专栏Pythonista

Golang之Mysql事务

40420

扫码关注云+社区

领取腾讯云代金券