2

多くの入力、テキストエリア、およびチェックボックスを備えた巨大なフォームがあります。フォームにはキャプチャがあります。フォームの回答をローカルに保存してlocalStorage、キャプチャが返された場合にfailフォーム データが再入力されるようにします。

HTML

<form name="wellnessForm" id="wellnessForm" action="confirm.php" method="POST">
  <input type="text" name="firstName" />
  <br/>
  <input type="checkbox" name="noConcernsChk[]" value="1" />
  <input type="checkbox" name="noConcernsChk[]" value="2" />
  <br/>
  <textarea>
  </textarea>
</form>

jQuery

// DOM ready
$(function(){
    $(':text').blur(function(e){
        localStorage.setItem("flag", "set");
        var data = $('#wellnessForm').serializeArray();
        $.each(data, function(i, obj){
            localStorage.setItem(obj.name, obj.value);  
        });
    });
    $(':checkbox').click(function(e){
        localStorage.setItem("flag", "set");
        var data = $('#wellnessForm').serializeArray();
        $.each(data, function(i, obj){
            localStorage.setItem(obj.value, e.checked);
        });
    });

    // test if there is already saved data
    if( localStorage.getItem("flag") == "set" ){

        var data = $("#wellnessForm").serializeArray();

        // have to select the valid inputs based on their name attribute
        $.each(data, function(i, obj){

            // check if checkbox
            if(obj.name == 'noConcernsChk[]'){
                $( "[value='"+obj.value+"']:checkbox" ).prop('checked', true);
            }
            else{
                $("[name='" + obj.name + "']").val(localStorage.getItem(obj.name));
            }

        }); 
    }

    // provide mechanism to remove data (TODO: remove actual data not just kill the flag)
    $("#clearData").click(function(e){
        e.preventDefault();
        localStorage.setItem("flag", "");
    });

});

コードペンのソース

私
の例からわかるように、テキスト入力が機能しています。しかし、私はチェックボックスにこだわっています。localStorageボックスがチェックされているかどうかを覚えておきたいのですが、チェックされている場合は、ユーザーのフォームで再チェックしてください。また、テキストエリアはまだ機能していませんが、それほど難しくはありません。

質問
チェックボックスの状態をローカル ストレージに保存し、それを呼び出す (そして適切なボックスにチェックを入れる) にはどうすればよいですか?

4

2 に答える 2

1

別のオプションは、既存のプラグインを使用することです。

たとえば、persistoは、localStorage/sessionStorage への簡単なインターフェイスを提供し、フォーム フィールド (入力、ラジオ ボタン、およびチェックボックス) の永続化を自動化するオープン ソース プロジェクトです。
（免責事項：私は著者です。）

永続化機能

これには、依存関係として jQuery が必要であることに注意してください。

例えば：

<form name="wellnessForm" id="wellnessForm" action="confirm.php" method="POST">
  <input type="text" name="firstName" />
  <br/>
  <input type="checkbox" name="noConcernsChk[]" value="1" />
  <input type="checkbox" name="noConcernsChk[]" value="2" />
  <br/>
  <textarea name="detailsText">
  </textarea>
</form>

次のように処理できます。

// Maintain client's preferences in localStorage:
var store = PersistentObject("wellnessData");

// Initialize form elements with currently stored data
store.writeToForm("#wellnessForm");

// Allow users to edit and save settings:
$("#wellnessForm").submit(function(e){
  // ... maybe some validations here ...
  store.readFromForm(this);
  e.preventDefault();
});
于 2016-06-17T20:01:10.527 に答える