クッキーにフォームの値を保存してテンプレ的に使うやつ試作 | Codetter（こーどったー）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
//保存する要素取得
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を代入
        }
    }
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX