通过JavaScript+Cookies实现表单内容保存并自动填充

在使用Typecho的时候，为了防止过多垃圾评论充斥整个博客，我们一般会强制要求游客在发表评论时填写自己的昵称与邮箱并提交给后台进行验证。这样（大概）可以减少垃圾评论出现的频率，不过同时也带来了一个问题：游客每次发表评论时都需要重新填写相关验证信息。

在不考虑浏览器的自动填充表单的情况下，要解决这个问题，一般有两个解决办法：换用三方评论插件通过评论插件平台的相关验证措施来保证访客的真实性  或  取消邮箱验证并开启验证码来阻挡广告机器人的自动发布（效果很差）。

这里要介绍一种通过保存表单内容的方式来以不更改验证方法的情况下解决这个问题的方案。

基本思路：

通过插入一个全局JavaScript脚本，在用户输入完表单内容后，通过放置一个询问复选框来让游客自行决定是否保存所填入的表单信息，如果游客同意保存表单信息，则将所填入的表单信息存入站点Cookies， 并在下次访问相关页面的时候通过DOM相关操作重新载入Cookies内已经存入的表单信息，从而实现自动保存与恢复。

JavaScript示例：

// Set Site Cookies 
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();
	}
	else{
		document.cookie = sName + "=" + escape(sValue);
	}
}

// Read Site Cookies
function GetCookie(sName) {

	var arr = document.cookie.match(new RegExp("(^| )"+sName+"=([^;]*)(;|$)"));
	if(arr !=null){return unescape(arr[2])};
	return null;

}

// Load saved data to forms
function pushFormInfo() 
{
	var strName=GetCookie("name");
	var bolRemembered=GetCookie("remembered");
	if(bolRemembered=="true")
	{
		document.getElementById("name").value=strName;
		document.getElementById("chkBoxRem").checked=(bolRemembered==="true");
	}
}

// Save form inputs to cookies
function savFormInfo()
{
	var strName=document.getElementById("name").value;
	var bolRemembered=document.getElementById("chkBoxRem").checked;

	SetCookie("name",strName,365);
	SetCookie("remembered",bolRemembered,365);

}

// Checkbox event handler
function checkBoxOnClick() 
{
	if(document.getElementById("chkBoxRem").checked==true) {
		savFormInfo();
	}
	else{
			SetCookie("name","");
			SetCookie("remembered",false);
		}
}

表单页面调用方法：

<p>Name: <input type="text" name="name" id="name"></label> </p>
<input type="checkbox" name="chkBoxRem" id="chkBoxRem" onclick="checkBoxOnClick();"/> <label for="chkBoxRem">当你勾选了这里后，你在上面所填写的内容会被保存并在下次访问页面时自动填充</label>
<script language="JavaScript" type="text/javascript">pushFormInfo();</script>

示例：

Demo