[Javascript] 使用 jQuery 把表單資料紀錄在 cookie 裡

做了一個有很多選項要填寫的表單，但由於一些環境上的考量，有點懶的把已填寫過過得表單資料記錄在 server 端，因此就想到稍微惡搞一下，把表單資料都紀錄在 client 上！由於該表單也沒有啥機密資訊，所以也不用太擔心什麼。

紀錄方式：

當使用者按下送出表單的那一刻時，除了會加上一些判斷，確認資料是否有輸入完整，而後可以做的小動作就是把表單的資料都儲存在 cookie 裡，以後有需要可以從 cookie 撈出來幫忙填寫。

相關環境：

• jQuery
  
  
  
  • <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  
  
  
  


• jQuery Plugin - Cookie (非必要)
  
  
  
  • <script type="text/javascript" src="http://plugins.jquery.com/files/jquery.cookie.js.txt"></script>
  
  
  • 自己管也可以，但我有點懶的回顧 cookie 語法，就改用這個 plugin 啦，用 $.cookie( 'Name' , 'Value' , { path: '/', expires: 365 } ); 儲存，用 $.cookie( 'Name' ) 取回數值
  
  
  
  

用法：

<form method="POST" onsubmit="return checkData();">
    <dl>
        <dt><button onclick="reload(); return false">讀取前次資料</button></dt>

        <dd>&nbsp;</dd>


        <dt>姓名</dt>
        <dd><input class="cookie" name="builder_name" style="width:50%;"/></dd>
        <dd>&nbsp;</dd>

        <dt>喜愛運動</dt>
        <dd>
            <select class="cookie" name="status">
                <option value="0" selected>否</option>
                <option value="1">是</option>
            </select>
        </dd>
        <dd>&nbsp;</dd>


        <dt>狀態</dt>

        <dd><input type="checkbox" name="status"/> 已婚</dd>
        <dd>&nbsp;</dd>

        <dd>&nbsp;</dd>

       
<dt><button type="submit">執行</button></dt>

    </dl>
</form>

<script type="text/javascript">

function checkData()
{
    // ... do check ...

    // ... do save ...
    save();

    return true;
}

function save()
{
    $( '.cookie' ).each( function(){
        var target_cookie = '__' + $(this).attr('name');
        var data = $(this).val();
        if( $(this).attr('type') == 'checkbox' )
            data = $(this).is(':checked') ? 'on' : 'off';
    
        $.cookie( target_cookie, data , { path: '/', expires: 365 } );
        //console.log( target_cookie +' : ' + $(this).attr('type') + ' : ' + $.cookie( target_cookie ) + ' : ' + data );
    });
}

function reload()
{
    $( '.cookie' ).each( function(){
        var target_cookie = '__' + $(this).attr('name');
        if( $.cookie( target_cookie ) )
        {
            if( $(this).attr('type') == 'checkbox' )
            {
                if( $.cookie( target_cookie ) == 'on' )
                    $(this).attr('checked', true);
                else
                    $(this).attr('checked', false);
            }
            else if( $(this).attr('type') == 'select-one' && $(this).get(0) && $(this).get(0).options && $(this).get(0).options.length )
            {
                var data = $.cookie( target_cookie );
                var options_list = $(this).get(0).options;
                for( var i=0 , cnt = options_list.length ; i<cnt ; ++i )
                {
                    if( options_list[i].value == data )
                    {
                        $( options_list[i] ).attr( 'selected' , 'selected' );
                        break;
                    }
                }
                $(this).trigger('change');  // 有些 select 可以搭配 change 事件
            }
            else
                $(this).val( $.cookie( target_cookie ) );
            //console.log( target_cookie +' : ' + $(this).attr('type') + ' : ' + $.cookie( target_cookie ) );
        }
    });
}
</script>

如此一來，就可以儲存表單文字、checkbox以及 select 等，都可以處理。這邊比較投機的是對要儲存的表單，多設一個 class 數值，用來讓 jQuery 準確地撈出來。