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>