解决JS操作Cookies出现的乱码问题,修复WordPress评论乱码
时间:2022-05-05
本文章向大家介绍解决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
- 【C语言练手】C语言画太极图
- 关于奇怪的并行进程分析(一) (r6笔记第41天)
- 关于ora-02391问题的总结(r6笔记第40天)
- 一次数据库响应慢的问题诊断(r6笔记第39天)
- 贝叶斯分类器及Python实现
- R语言中文分词工具
- orabbix结合python发送图形报表(二) (r6笔记第38天)
- 14(01)正则表达式,Pattern,Mactcher,Math,BigInteger,BigDeximal,System等
- oracle的TAF浅析 (r6笔记第37天)
- R语言高级绘图命令(标题-颜色等)
- 14(02)正则表达式,Pattern,Mactcher,Math,BigInteger,BigDeximal,System等
- R语言 判别分析
- Apache、struts1、struts2文件上传下载的3种方式
- 解析实时的DB time过程分析(r6笔记第35天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 技术分享 | Online DDL 工具 gh-ost
- Spring Boot 整合Mybatis
- R语言进阶之时间序列分析
- Spring Boot 实现员工信息管理demo
- 如何把 Flutter 云端一体化做到极致?
- 微服务[学成在线] day16:基于Spring Security Oauth2开发认证服务
- 新的跨域策略:使用COOP、COEP为浏览器创建更安全的环境
- CVE-2020-1948:Dubbo Provider默认反序列化复现
- R语言进阶之因子分析
- Spring Boot 整合Thymeleaf
- Spring Boot 整合Shiro
- 微服务[学成在线] day01:CMS接口开发
- 微服务[学成在线] day02:CMS前端开发
- ggplot2| 绘制KEGG气泡图
- 微服务[学成在线] day03:CMS页面管理开发