将更改的HTML保存到Javascript变量？

Question

If I have a HTML code with for example an input field inside it like this:

<div><input type="text" name="search_word" value=""></div>

And then a website visitor types something into it, for example Car , without submitting the field or anything, but so the current HTML code looks like this:

<div><input type="text" name="search_word" value="Car"></div>

Can I somehow store this HTML code to a Javascript variable WITH the word Car or whatever is typed in the input field? The point is to store the HTML code as it looks for the moment. The input field was just an example.

Thing is that the visitor can go to another tab in this section of the website and then get back to this tab. My idea is that the HTML will be retrieved from the Javascript variable.

I've noticed that it doesn't work with just $('.search-form').html() . That will just store the original version of the HTML.

I understand it's possible to just let the HTML be left in the code with a "hidden" style-rule or something. But I would mostly like to have it stored as a Javascript variable for performance reasons.

Answer 1

You could try using web storage, take a look at this link Web storage (W3Schools)

You can store data in the browser and use it later on.

To save on code repeating, you can do something like this

<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>

Answer 2

<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>