Сохранить измененный HTML в переменную Javascript?
Если у меня есть HTML-код, например, с полем ввода внутри него, например:
<div><input type = "text" name = "search_word" value = ""></div>
И тогда посетитель сайта вводит что-то в него, например Машина, не отправляя поле или что-то еще, но поэтому текущий HTML-код выглядит так:
<div><input type = "text" name = "search_word" value = "Car"></div>
Могу ли я каким-то образом сохранить этот HTML-код в переменной Javascript со словом Car или чем-то еще, что введено в поле ввода? Суть в том, чтобы сохранить HTML-код таким, каким он выглядит на данный момент. Поле ввода было просто примером.
Дело в том, что посетитель может перейти на другую вкладку в этом разделе сайта, а потом вернуться на эту вкладку. Моя идея состоит в том, что HTML будет получен из переменной Javascript.
Я заметил, что он не работает только с $('.search-form').html(). Это просто сохранит исходную версию HTML.
Я понимаю, что можно просто оставить HTML в коде со «скрытым» правилом стиля или чем-то еще. Но в основном я хотел бы сохранить его как переменную Javascript по соображениям производительности.
@MatthewPage Нет, я сейчас создаю навигацию на основе Javascript. Они могут переключаться между вкладками, не покидая страницы. В этом весь смысл.
внешний html не работает?
@Hasanalattar Имеет ли эта функция какие-либо функции, отличные от просто html (), кроме того, что она также содержит внешнее поле?
Если я понимаю ваш вопрос, вы хотите зафиксировать «текущее» состояние элемента html с любыми изменениями атрибутов (а не только со значением). Я не знаю простого способа сделать это во всех браузерах, поскольку большинство браузеров извлекают только html, который был отправлен как часть исходного запроса (а не текущее состояние этих элементов), когда вы используете innerHTML, outerHTML или jQuery html().
@peter westeelund я читал это .. stackoverflow.com/a/46943719/4410536 так что я подумал, может быть, это сработает
@benvc Но разве нельзя хотя бы привязать действие сохранения к коду, который был изменен с помощью on.click-events. Возможно, это не сработает с типом ввода. Но с кодом внутри этого блока кода, который изменен jQuery. Но я даже не могу заставить это работать.
Вы можете перебрать все атрибуты элемента и их значения, чтобы создать и сохранить объект, представляющий текущее состояние элемента, но у меня нет хороших идей для простого способа хранения только тех значений атрибутов, которые изменились. См. Получить все атрибуты элемента с помощью jQuery
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете попробовать использовать веб-хранилище, взгляните на эту ссылку Веб-хранилище (W3Schools)
Вы можете сохранить данные в браузере и использовать их позже.
Чтобы сэкономить на повторении кода, вы можете сделать что-то вроде этого
<input type = "text" name = "product" onchange = "TextChanged(this.name, this.value)">
<input type = "text" name = "product1" onchange = "TextChanged(this.name, this.value)">
<input type = "text" name = "product2" onchange = "TextChanged(this.name, this.value)">
<script type = "text/javascript">
TextChanged = (name, value) =>
{
if (localStorage[name] == null)
{
//if the item doesn't exist, create it
localStorage.setItem(name, value);
}
else
{
//else modify it
localStorage[name] = value;
}
}
</script>
Но тогда я должен пройти все в HTML-коде, который можно изменить, и хранить все отдельно?
Как я сказал в вопросе. Поле ввода является просто примером. Это может быть что угодно. Элемент div внутри кода, который виден или скрыт, или что-то в этом роде.
возможно, вызывая функцию onchange для каждого метода и передавая значение и имя, а затем просто сохраняйте эти данные в объекте.
Я отредактировал свой ответ, чтобы дать приблизительное представление об одном из возможных способов сделать это.
<input type = "text" id = "user-input" oninput = "captureInput()">
<p id = "user-output"></p>
<script>
function captureInput() {
var userInput = document.getElementById("user-input").value;
var elOutput = document.getElementById("user-output");
elOutput.innerHTML = "User Input: " + userInput;
var userOutput = elOutput.innerHTML;
}
</script>
Вы должны увидеть, что ввел пользователь, под полем ввода. И сохраняется в переменной userOutput. Надеюсь это поможет.
Когда вы говорите, что они переходят на другую вкладку, вы имеете в виду, что они загружают новую страницу? Если они это сделают, ваши переменные javascript будут потеряны навсегда...