クッキーにフォームの値を保存してテンプレ的に使うやつ試作

  • タグ:
  • タグはありません
//保存する要素取得
var input = $('form').find('input,textarea').not('input[type="submit"],input[type="button"]');

var savebtn = $('#save'); //保存ボタン
var loadbtn = $('#load'); //呼び出しボタン

//保存処理
$(savebtn).on('click',function(){
	$.each(input,function(key,value){
		//フォーム要素すべてに連番data属性付加
		$(this).attr('data-keys','saveform'+key);
		
		//保存する内容を振り分け
		var type = $(this).attr('type');
		if(type == 'text' || $(this)[0].tagName == 'textarea'){ //textかtextareaのとき(HTML5対応時はtypeを追加)
			var setval = $(this).val();
		} else if(type == 'radio' || type == 'checkbox'){
			var setval = $(this).attr('checked'); //チェックされていればcheckedが返る
		}
		
		
		$.cookie('saveform'+key,setval); //text,textareaはvalue、radioとcheckboxはcheckの値
	});
}

$(loadbtn).on('click',function(){
	$.each(input,function(key,value){
		//フォーム要素すべてに連番data属性付加
		$(this).attr('data-keys','saveform'+key);
		
		//保存された値を取得
		var loadval = $.cookie('saveform'+key);

		//フォームのtypeによって振り分け
		var type = $(this).attr('type');
		if(type == 'text' || $(this)[0].tagName == 'textarea'){ //textかtextareaのとき(HTML5対応時はtypeを追加)
			var setval = $(this).val(loadval);
		} else if(type == 'radio' || type == 'checkbox'){
			var setval = $(this).attr('checked',(loadval == 'checked') ? 'checked' : ''); //保存値がcheckedのときはchecked=checkedを代入
		}
	}
});