Сохранение при изменении и последующее получение данных формы сеанса
Не вдаваясь в причины, по которым мне нужно это сделать (это предотвращает переписывание кучи другого ранее существовавшего кода), мне нужно хранить данные формы всякий раз, когда в форму вносятся изменения, чтобы пользователь мог перейти на другую вкладку, которая может потребовать обновление страницы для определенных функций. Это, конечно, очищает форму, так как форма находится на той же странице. Мое решение состоит в том, чтобы сериализовать форму (используя jQuery) при любом изменении формы. Я мог бы сохранить эти сериализованные данные в переменной сеанса PHP. Когда пользователь повторно выбирает вкладку формы, я могу восстановить данные формы. Я просто не знаю, как восстановить сериализованные данные формы. Или, возможно, есть более элегантный способ сделать это.
Я использую это для сериализации данных формы:
<script type = "text/javascript">
var FormChanged = false;
$('#TheForm').on('keyup change paste', 'input, select, textarea', function()
{
var Form = $('#TheForm').serialize();
FormChanged = true;
});
</script>
Ответы 1
Много способов сделать это. Вот один пример, который использует localStorage.
Рабочий пример: https://jsfiddle.net/Twisty/ofrcza1g/
HTML
<div>
<form id = "myForm">
<label for = "myName">Name</label> <input type = "text" id = "myName" /><br />
<label for = "myTitle">Title</label> <input type = "text" id = "myTitle" /><br />
<label for = "myGender">Gender</label> <select id = "myGender">
<option></option>
<option>Male</option>
<option>Female</option>
<option>Non-Binary</option>
</select>
</form>
</div>
<button id = "myStatus">Check Status</button>
JavaScript
$(function() {
var dataSaved = false;
function saveData(i, s) {
// Input: Index, String
// Output: Boolean
localStorage.setItem(i, s);
return true;
}
function loadData(i) {
// Input: Index
// Output: Parse Variable Data
var d = localStorage.getItem(i);
return JSON.parse(d);
}
function gatherData(f) {
var d = {};
f.find("input, select, textarea").each(function(i, el) {
var k = $(el).attr("id");
var v = $(el).val();
d[k] = v;
});
return d;
}
$('#myForm').on('change blur', 'input, select, textarea', function(e) {
var fd = JSON.stringify(gatherData($("#myForm")));
console.info("Saving", fd);
dataSaved = saveData("fd", fd);
});
$("#myForm").ready(function() {
var fd = loadData("fd");
console.info(fd);
$.each(fd, function(k, v) {
$("#" + k).val(v);
});
});
$("#myStatus").click(function() {
console.info(loadData("fd"));
});
});
Вы также можете использовать .serialize(). Я только что обнаружил, что он зависит от атрибута name.
Надеюсь это поможет.
Отлично, Твисти! Вверх и вперед!
На самом деле кажется, что localStorage менее чем оптимален. В какой-то момент данные должны быть очищены. Насколько я могу судить, это невозможно сделать без очистки всех сохраненных данных браузера, которые могут удалить другое локальное хранилище пользователя. Я попытался использовать sessionStorage.removeItem('fd'); localStorage.removeItem('fd'); который очистит форму, но не будет удален, при обновлении данные возвращаются.
Я предполагаю, что, возможно, лучшим способом было бы сериализовать и AJAX его в сообщение и сохранить сообщение в массиве сеансов. Есть идеи получше?
@RationalRabbit, который тоже может работать, если есть сценарии на стороне сервера. Я не знаю ни окружения, ни масштаба того, что вы хотите сделать.
На самом деле, это больше похоже на мой переулок. Не знаю, как кратко объяснить ситуацию. По сути, разные вкладки на одной странице. Одна из них — это таблица с функциями разбиения на страницы, которые требуют либо обновления страницы, либо перезаписи всего раздела таблицы с использованием AJAX. Обновление страницы, конечно же, очистит форму. Поэтому я подумал, что вместо того, чтобы переписывать раздел таблицы, будет меньше времени, если просто восстановить данные формы при обновлении страницы.
Где вы хотите хранить данные? Локальное хранилище? через
.data()? Если элементы остаются активными в DOM, вы можете использовать.data()и обновлять его при изменении.