From 表单临时存储

情景概述：比如我辛苦的敲了100个字，或者更多，当我点击保存时，却在保存之前报错导致保存失败，当想再回到此页面上重新填写时，发现以前写的数据都不见，然后就会一顿大怒。于是就有了我们下面的故事...

1. form中submit按钮设置点击事件调用AutoSave()
2. 带form页的body加onload调用Autoload()
3. 在返回页面的body加onload调用delCookie()

注：根据不同的模板页面若可以控制onload方法，可以进一步控制只有在使用保存方法时做返回页的onload调用删除cookie

自改后的 autosave.js 内容如下：


/*
* 整体逻辑：界面抓取name和value，传到后台 [本打算后台清理缓存数据然后再进行页面的跳转处理]
*  
* 事情总是说起来简单做起来却没有想象中的那么简单 我在网上找了很多删除cookie的方法 都没达到我想要的目的  
* 要是哪位好心人会的话 或 有更好的form提交临时缓存数据的方法 ，希望能分享于我 [1771455166@qq.com]
*  
* 实在没找到就使用最笨的方法去实现了，于是我采用在调转后的页面上进行cookie的循环清理
*  
* 下面划线部分 是我在后台编写的清理cookie的代码：

-----------------分割线 start---------------------

Cookie cookies[] = request.getCookies();
for (Cookie c : cookies) {
if (c.getName().equals("JSESSIONID")) {
continue;
}
Cookie newCookie = new Cookie(c.getName(), null);

newCookie.setMaxAge(0);

newCookie.setPath("/"); // 项目所有目录均有效，这句很关键，否则不敢保证删除

response.addCookie(newCookie); // 重新写入，将覆盖之前的
}

-----------------分割线 end---------------------

*
*循环式根据键删除cookie [需要注意的点是：有时候我们的cookie并不是全部需要清理 ，这时候就需要考虑过滤处理了]
*/
function delCookie() {
var arrCookie=document.cookie.split("; "); // 将多cookie切割为多个名/值对
for(var i=0;i <arrCookie.length;i++)
{ // 遍历cookie数组，处理每个cookie对
var arr=arrCookie[i].split("=");
if(arr.length>0 && arr[0] != ""){
DeleteCookie(arr[0]);
}
}
}


/*
* 初始化界面 让cookie中存储的值展示出来
*/
function Autoload() {
//初始进来cookie值set就位
if(document.cookie.length == 0){
return;
}
$("body").find("[name]").each(function(i, e) {
var _name = $(this).attr("name");
if(_name == "JSESSIONID"){
return;
}
var _value = $(this).val();
var _LastContent = GetCookie(_name);
if (!_value) {
$(this).val(_LastContent);
}
});
}


/*
* 抓取body中所有name的属性 并暂时存储在cookie中
*/
function AutoSave() {
$("body").find("[name]").each(function(i, e) {
var _name = $(this).attr("name");
var _value = $(this).val();
var _LastContent = GetCookie(_name);
if (_value) {
//var expDays = 30; //存10秒
var exp = new Date();

exp.setTime( exp.getTime() + 10000 ); // 24*60*60*1000 = 86400000
var expires='; expires=' + exp.toGMTString();


// SetCookie
document.cookie = _name + "=" + escape (_value) + expires;
}

});
}
//该段代码虽然被注释掉了，但是它属于autosave.js中的一部分。 详情请参考网上正规的autosave.js

/*
var _value = it.value;
if (!_value) {
var _LastContent = GetCookie(it);

if (!_LastContent) return;
it.value = _LastContent;

//if (confirm("Load Last AutoSave Content?")) {
//it.value = _LastContent;
//return true;
//}
} else {

//var expDays = 30; //存10分钟
var exp = new Date();
exp.setTime( exp.getTime() + 600000 ); // 24*60*60*1000 = 86400000
var expires='; expires=' + exp.toGMTString();


// SetCookie
document.cookie = it + "=" + escape (_value) + expires;
}
*/




/*
* 配合 GetCookie 获取 cookie的值
*/
function getCookieVal (offset) {
var endstr=document.cookie.indexOf (";",offset);
if (endstr==-1) endstr=document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}


/*
* 根据cookie的键 获取 cookie的值
*/
function GetCookie (name){
var arg=name+"=";
var alen=arg.length;
var clen=document.cookie.length;
var i = 0;
while (i<clen){
var j=i+alen;
if (document.cookie.substring(i,j)==arg) return getCookieVal (j);
i = document.cookie.indexOf(" ",i)+1;
if (i==0) break;
}
return null;
}


/*
* 根据cookie的键 设置 cookie的有效时间 使其失效
*/
function DeleteCookie (name) {
var exp=new Date();
exp.setTime (exp.getTime()-1);
var cval=GetCookie (name);
document.cookie=name+"="+cval+";expires="+exp.toGMTString();
} 

-----------------------------------------------------------------------完-------------------------------------------------------------------------

注：以后有好的form存储方式再更改，这方法并不是适合所有场景。