Подтвердить что ты не робот

Как перезагрузить текущую страницу без потери данных формы?

Можно ли перезагрузить текущую страницу без потери данных формы? Я использовал..

window.location = window.location.href;

и

window.location.reload(true);

Но эти две вещи не могут получить более ранние формы для меня. Что не так? При обновлении браузера вручную, это нормально (я не теряю данные формы). Пожалуйста, расскажите мне, как это понять.

Вот мой полный код...

<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");
    });}
4b9b3361

Ответ 1

Вы можете использовать различные локальные механизмы хранения для хранения этих данных в браузере, такие как Web Storage, IndexedDB, WebSQL (устарело) и File API (устарело и доступно только в Chrome) (и UserData с IE).

Самым простым и наиболее широко поддерживаемым является WebStorage, где у вас есть постоянное хранилище (localStorage) или сеанс (на основе sessionStorage), который находится в памяти до закрытия браузера. Оба используют один и тот же 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());
    // ...
}

Веб-хранилище работает синхронно, поэтому это может работать здесь. При желании вы можете сохранить данные для каждого события размытия на элементах, в которые они вводятся.

При загрузке страницы вы можете проверить:

window.onload = function() {

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

    // ...
}

getItem возвращает null если данные не существуют.

Используйте sessionStorage вместо localStorage если вы хотите хранить только временные.

Ответ 2

Я изменил код 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>

Ответ 5

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

работает для меня.

Ответ 6

Обычно я автоматически отправляю свою собственную форму на сервер и перезагружаю страницу с заполненными аргументами. Замените аргументы-заполнители параметрами, полученными вашим сервером.

Ответ 8

Как упоминается в некоторых ответах, localStorage является хорошим вариантом, и вы можете сделать это самостоятельно, но если вы ищете полированный вариант, на GitHub уже есть проект, который делает это garlic.js.

Ответ 9

Вам необходимо отправить данные и перезагрузить страницу (форма отображения на стороне сервера с данными), просто перезагрузка не сохранит данные. Только ваш браузер может кэшировать данные формы при ручном обновлении (не то же самое в браузерах).

Ответ 11

Вы можете использовать библиотеку FormPersistence.js, которую я написал, которая обрабатывает (де) сериализацию, сохраняя значения в локальном/сеансовом хранилище. Этот подход похож на тот, который приведен в другом ответе, но он не требует jQuery и не сохраняет незашифрованные пароли в веб-хранилище.

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

Необязательный второй параметр каждой функции FormPersistence определяет, использовать ли локальное хранилище (false) или хранилище сеансов (true). В вашем случае хранилище сеансов, скорее всего, более уместно.

Данные формы по умолчанию будут удалены из хранилища после отправки, если вы не передадите false в качестве третьего параметра. Если у вас есть специальные функции обработки значений (например, вставка элемента), вы можете передать их в качестве четвертого параметра. Смотрите хранилище для полной документации.

Ответ 12

Зарегистрируйте прослушиватель событий для события keyup:

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