做了一個有很多選項要填寫的表單，但由於一些環境上的考量，有點懶的把已填寫過過得表單資料記錄在 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> </dd>
<dt>姓名</dt>
<dd><input class="cookie" name="builder_name" style="width:50%;"/></dd>
<dd> </dd>
<dt>喜愛運動</dt>
<dd>
<select class="cookie" name="status">
<option value="0" selected>否</option>
<option value="1">是</option>
</select>
</dd>
<dd> </dd>
<dt>狀態</dt>
<dd><input type="checkbox" name="status"/> 已婚</dd>
<dd> </dd>
<dd> </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 準確地撈出來。
