web-dev-qa-db-ja.com

フォームデータを失うことなく現在のページをリロードする方法は？

フォームデータを失うことなく現在のページをリロードできますか？使用しました。

window.location = window.location.href;

そして

window.location.reload(true);

しかし、これら2つのことは、以前のフォームデータを取得することはできません。なにが問題ですか ？ブラウザを手動で更新する場合は問題ありません（フォームデータは失われません）。解決方法を教えてください。

これが私の完全なコードです...

<div class="form-actions">
        <form>
            <table cellpadding = "5" cellspacing ="10">
                <tr class="control-group">
                    <td style="width: 100px;">
                        <div>Name:&nbsp;<font color="red">(*)</font></div>
                    </td>
                    <td>
                        <input type="text" id="inputName" placeholder="Name" required>
                    </td>
                </tr>
                <tr class="control-group">
                    <td>
                        <div>Email:&nbsp;<font color="red">(*)</font></div>
                    </td>
                    <td>
                        <input class="span3" placeholder="[email protected]" id= "inputEmail" type="email" required>
                    </td>
                </tr>
                <tr class="control-group">
                    <td>
                        <div>Phone:&nbsp;</div>
                    </td>
                    <td>
                        <input type="text" id="inputPhone" placeholder="phone number">
                    </td>
                </tr>
                <tr class="control-group">
                    <td>
                        <div>Subject:&nbsp;<font color="red">(*)</font></div>
                    </td>
                    <td>
                        <input type="text" id="inputSubject" placeholder="Subject" required>
                    </td>
                </tr>
                <tr class="control-group">
                    <td colspan ="2">
                        <div>
                            <div>Detail:&nbsp;</div>
                            <div class="controls">
                                <textarea id="inputDetail"></textarea>
                            </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                    <div>
                        <label style="font-weight: bold;" class="checkbox"> <input id="confirmCheck" value="" type="checkbox">
                                I Agree to the Personal information handling policy
                        </label>
                    </div>
                    <div id = "alert_placeholder"></div>
                        <div class="acceptment">
                            [Personal information handling policy]<br> <br>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div align="center">
                            <button id="btnConfirm" class="btn btn-primary">Confirm</button>
                            <input type="reset" style="width: 65px; height: 27px;" id="btnReset" class="btn">
                        </div>
                    </td>
                </tr>
            </table>
        </form>
    </div>

そして、私のJSファイルで..

function bind() {
$('#btnConfirm').click(function(e) {
    if ($('#confirmCheck').is(":checked")) {
        getConfirmationForSendFAQ();
    }
    else {
        e.preventDefault();
        showalert("You should accept \"Personal Information Policy\" !", "alert-error");
    }
});};function getConfirmationForSendFAQ() {
    var name = $('#inputName').val();
    var email = $('#inputEmail').val();
    var phone = $('#inputPhone').val();
    var subject = $('#inputSubject').val();
    var detail = $('#inputDetail').val();

    $('.form-actions').empty();
    html = [];
    html.Push("<table cellpadding ='8' class = 'submitInfo'");
    html.Push("<tr>");
    html.Push("<td class = 'title'>Name:</div>");
    html.Push("<td class = 'value'>"+ name +"</td>");
    html.Push("</tr>");

    html.Push("<tr>");
    html.Push("<td class = 'title'>Email Address:</div>");
    html.Push("<td class = 'value'>"+ email +"</td>");
    html.Push("</tr>");

    if (phone.trim().length > 0) {
        html.Push("<tr>");
        html.Push("<td class = 'title'>Phone No:</div>");
        html.Push("<td class = 'value'>"+ phone +"</td>");
        html.Push("</tr>");
    }

    html.Push("<tr>");
    html.Push("<td class = 'title'>Subject:</div>");
    html.Push("<td class = 'value'>"+ subject +"</td>");
    html.Push("</tr>");

    html.Push("<tr>");
    html.Push("<td class = 'title'>Detail Info:</div>");
    html.Push("<td class = 'value'>"+ detail +"</td>");
    html.Push("</tr>");

    html.Push("<tr>");
    html.Push("<td colspan='2'><div align = 'center'>");
    html.Push("<button id='btnSend' class='btn btn-primary' style='width: 65px;'>Send</button>");
    html.Push("<button id='btnReturn' class='btn btn-inverse' style='width: 65px; height: 27px; margin-left: 5px;'>Return</button>");
    html.Push("</div></td></tr>");

    html.Push("</table>");
    $('.form-actions').append(html.join(''));
    $('#btnReturn').click(function(e) {
        // HERE I WANT TO KNOW HOW TO DO.....
    });
    $('#btnSend').click(function(e) {
        alert("Doom");
    });}
javascriptjqueryhtmlhtml5jquery-ui
53
Cataclysm

さまざまなローカルストレージメカニズムを使用して、Webストレージ、IndexedDB、WebSQL（非推奨）、File API（非推奨、Chromeでのみ利用可能）（およびIEのUserData）など、このデータをブラウザーに格納できます。

最も単純で最も広くサポートされているのは、ブラウザを閉じるまでメモリにある永続ストレージ（localStorage）またはセッションベース（sessionStorage）があるWebStorageです。両方が同じAPIを共有します。

たとえば、ページがリロードされようとしているときに、次のようなことを（簡略化して）行うことができます。

window.onbeforeunload = function() {
    localStorage.setItem("name", $('#inputName').val());
    localStorage.setItem("email", $('#inputEmail').val());
    localStorage.setItem("phone", $('#inputPhone').val());
    localStorage.setItem("subject", $('#inputSubject').val());
    localStorage.setItem("detail", $('#inputDetail').val());
    // ...
}

Web Storageは同期的に動作するため、このmayはここで動作します。必要に応じて、データが入力された要素に各ぼかしイベントのデータを保存できます。

ページの読み込み時に次を確認できます。

window.onload = function() {

    var name = localStorage.getItem("name");
    if (name !== null) $('#inputName').val("name");

    // ...
}

データが存在しない場合、getItemはnullを返します。

一時のみを保存する場合は、sessionStorageの代わりにlocalStorageを使用します。

53
user1693593

K3Nのコードを変更して目的に合わせて機能させ、他のユーザーがsessionStorageの仕組みを理解できるようにコメントを追加しました。

<script>
    // Run on page load
    window.onload = function() {

        // If sessionStorage is storing default values (ex. name), exit the function and do not restore data
        if (sessionStorage.getItem('name') == "name") {
            return;
        }

        // If values are not blank, restore them to the fields
        var name = sessionStorage.getItem('name');
        if (name !== null) $('#inputName').val(name);

        var email = sessionStorage.getItem('email');
        if (email !== null) $('#inputEmail').val(email);

        var subject= sessionStorage.getItem('subject');
        if (subject!== null) $('#inputSubject').val(subject);

        var message= sessionStorage.getItem('message');
        if (message!== null) $('#inputMessage').val(message);
    }

    // Before refreshing the page, save the form data to sessionStorage
    window.onbeforeunload = function() {
        sessionStorage.setItem("name", $('#inputName').val());
        sessionStorage.setItem("email", $('#inputEmail').val());
        sessionStorage.setItem("subject", $('#inputSubject').val());
        sessionStorage.setItem("message", $('#inputMessage').val());
    }
</script>
20
Doug Wilhelm

GitHubでこれを見つけてください。特別に作成されました。

https://Gist.github.com/zaus/4717416

7
Rajan Rawal

この回答は私にとって非常に役立ち、各フィールドを手動で確認する手間を省きます。

jQueryを使用して複雑なフォームの状態を保存する

6
Julian K
window.location.reload() // without passing true as argument

私のために働く。

4
Naveen Agarwal

HTML5 LocalStorageに同意します。 これはサンプルコードです

3
dikkini

いくつかの答えが言及しているように、 localStorage は良いオプションであり、あなたは確かに自分でそれを行うことができますが、洗練されたオプションを探しているなら、これを行うGitHubのプロジェクトが既にあります garlic.js 。

3
nickytonline

私は通常、自分のフォームをサーバーに自動的に送信し、入力された引数でページをリロードします。プレースホルダー引数を、サーバーが受信したパラメーターに置き換えます。

3
moutonjr

データを送信してページを再ロードする必要があります（データを含むサーバー側のレンダリングフォーム）。再ロードするだけではデータは保持されません。ブラウザが手動更新時にフォームデータをキャッシュしているだけかもしれません（ブラウザ間で同じではありません）。

2
Dileep

LocalStorage（ http://www.w3schools.com/html/html5_webstorage.asp ）を使用して、ページを更新する前に値を保存できます。

2
paka

私が書いたライブラリ FormPersistence.js を使用できます。このライブラリは、値をローカル/セッションストレージに保存することにより、フォームの（デ）シリアル化を処理します。このアプローチは 別の回答でリンクされた に似ていますが、jQueryを必要とせず、プレーンテキストのパスワードをWebストレージに保存しません。

let myForm = document.getElementById('my-form')
FormPersistence.persist(myForm, true)

各FormPersistence関数のオプションの2番目のパラメーターは、ローカルストレージ（false）を使用するか、セッションストレージ（true）を使用するかを定義します。あなたの場合、セッションストレージがより適切である可能性があります。

3番目のパラメーターとしてfalseを渡さない限り、デフォルトでフォームデータは送信時にストレージからクリアされます。特別な値処理関数（要素の挿入など）がある場合は、それらを4番目のパラメーターとして渡すことができます。完全なドキュメントについては、リポジトリを参照してください。

1
FThompson

keyupイベントのイベントリスナーを登録します。

document.getElementById("input").addEventListener("keyup", function(e){
  var someVarName = input.value;
  sessionStorage.setItem("someVarKey", someVarName);
  input.value = sessionStorage.getItem("someVarKey");
});
0
Himanshu Agrawal