专栏首页张戈的专栏解决JS操作Cookies出现的乱码问题,修复WordPress评论乱码

解决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 条评论
登录 后参与评论

相关文章

  • js获取url中?后的参数,修复移动版无法切换到电脑版的BUG

    昨天,发布了《完美实现移动主题在 360 网站卫士缓存全开情况下的切换》一文,通过 JS 实现了主题在移动端访问时的自动切换,最后提到了可以在电脑版和移动版的 ...

    张戈
  • 网站集成打字震动特效JS代码改进版

    这又是一个拖欠了很久的分享,很早就有朋友留言问评论打字炫彩、震动特效怎么实现的。这功能其实网上早就有人分享 N 遍了,有点搜索技巧和 DIY 能力的站长同学也早...

    张戈
  • Linux运维工程师:30道面试题整理

    前段时间,我在准备面试的时搜到的一套 Linux 运维工程师面试题,感觉比较全面,一直保存在草稿,刚在整理后台时翻了出来,干脆就发出来好了,以备不时之需。 1....

    张戈
  • Android 开发常用接口

    android常用接口 常见的一些调用接口 更多阅读全文后star,实时更、更新收集到的接口 dip转px public int convertDipO...

    用户1263308
  • python 识别登录验证码图片功能的实现代码(完整代码)

    在编写自动化测试用例的时候,每次登录都需要输入验证码,后来想把让python自己识别图片里的验证码,不需要自己手动登陆,所以查了一下识别功能怎么实现,做一下笔记...

    砸漏
  • 红帽助力HPC--我在Dell&RedHat HPC研讨会上的分享

    前言:今日,笔者受邀参加“Dell&RedHat HPC研讨会”。会上,分享了红帽在HPC领域的解决方案。由于很多朋友关心这个话题,因此将演讲的内容分享出来,供...

    魏新宇
  • 网络安全实验室平台(脚本关)

    看到了一个好玩的平台————网络安全实验室,看起来对新手还是有帮助的,如果你有编程基础也可以看看脚本关哦!

    轩辕小子
  • JavaScript小游戏2

    添加CSS样式 这类就没有定义外部的样式css文件,之间在页面中head->style标签中写入:

    Lemon黄
  • Glide源码分析(一)

    Glide作为一个图片加载框架深受开发者喜欢,包体积小,加载速度快,以及加载圆角等。作为一名开发者我们有必要去了解Glide图片加载机制,它是如何把图片加载出来...

    CatEatFish
  • 第16天:函数的定义和调用

    1、函数,是一种封装。就是将一些语句,封装到函数里面。通过调用的形式,执行这些语句。

    半指温柔乐

扫码关注云+社区

领取腾讯云代金券