表单自动保存与回填

情景概述：比如我辛苦的敲了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

{ // 遍历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

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存储方式再更改，这方法并不是适合所有场景。