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>