web自己主动保存表单

note:当中部分源代码来源网络

所用的框架:jquery

实现的功能：

1.自己主动保存表单

2.页面刷新的时候把自己主动保存的值赋值给表单元素

思路：

1.表单值改变的时候自己主动触发函数。保存表单(序列化)

2.页面刷新的时候获取保存的值

代码：

<script language="javascript" type="text/javascript">
getText();
$(function () {
//给class='.tabls绑定 input propertychange  change'
$('.tabls').bind('input propertychange change', function () {
if (check()) {
$.cookie("tableData", null);//删除cookie
var data = $(".tabls").serialize();
data = decodeURIComponent(data, true);
$.cookie("tableData", data);//填充cookie
}
});
})
//从cookie序列化中获取值
function getText() {
var cookieData = $.cookie("tableData");
if (cookieData != null) {
$(".tabls").each(function () {
var name = $(this).attr("name");
$(this).val(getUrlParam(name, cookieData));
});
}
}
//获取url中的參数
function getUrlParam(name, datas) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标參数的正則表達式对象
var r = datas.match(reg);  //匹配目标參数
if (r != null) return unescape(r[2]); return null; //返回參数值
}
//检查浏览器是否支持cookie
function check() {
if (window.navigator.cookieEnabled) {
return true;
}
else {
alert("请设置cookie可用，否则系统将不能自己主动保存信息");
return false;
}
}
</script>