html - localStorage に保存されたフォームデータからフォームを作成する方法は?

Question

したがって、フォームデータをローカルストレージに保存するための js ファイルがあります。

$(document).on('pageinit', function() { // dom ready handler for jQuery Mobile

    $('#form1').validate({ // initialize form 1
        // rules
    });

    $('#gotoStep2').on('click', function() { // go to step 2
        if ($('#form1').valid()) {
            // code to reveal step 2 and hide step 1
        }
    });

    $('#form2').validate({ // initialize form 2
        // rules
    });

    $('#gotoStep3').on('click', function() { // go to step 3
        if ($('#form2').valid()) {
            // code to reveal step 3 and hide step 2
        }
    });

    $('#form3').validate({ initialize form 3
        // rules,
        submitHandler: function (form) {
           // serialize and join data for all forms
           var data = $('#form1').serialize() + '&' + $('#form2').serialize() + '&' + $(form).serialize();
           window.localStorage.setItem('formData',data);
           // ajax submit
           return false; // block regular form submit action
        }
    });

    // there is no third click handler since the plugin takes care of this 
    // with the built-in submitHandler callback function on the last form.

}); 

それは仕事をしますが、ユーザーがサイトに入力してそれぞれのフィールドでデータが正しいかどうかを確認する場合に、その情報を取得してフォームに事前入力する方法がわかりません。フィールドが個別に保存されている場合の方法は知っていますが、例のようにシリアル化されている場合の方法はわかりません。

Sparky によって作成された実際の例を追加しましたwindow.localStorage(...)

ところで: 例のように 3 つだけでなく、100 以上のフィールドがあります。