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

如果我有一个HTML代码，例如其中有一个输入字段，如下所示：

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

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

然后网站访问者在其中键入一些内容，例如Car，而不提交字段或任何内容，但当前的HTML代码如下所示：

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

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

我可以用Car或输入字段中键入的任何东西将此HTML代码存储到Javascript变量中吗？关键是存储HTML代码，就像它现在看起来的那样。输入字段只是一个示例

问题是，访问者可以转到网站这一部分的另一个选项卡，然后回到这个选项卡。我的想法是HTML将从Javascript变量中检索

我注意到它不能只使用

$（'.search form'）.html（）

。这将只存储HTML的原始版本

---

我理解有可能只是让HTML留在代码中，使用“隐藏”样式规则或其他东西。但出于性能原因，我最希望将其存储为Javascript变量。

您可以尝试使用web存储，请查看此链接

您可以将数据存储在浏览器中，以后再使用

要节省代码重复，可以执行以下操作

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

TextChanged=（名称、值）=>
{
if（localStorage[name]==null）
{
//如果项目不存在，请创建它
setItem（名称、值）；
}
其他的
{
//否则修改它
localStorage[name]=值；
}
}

函数captureInput（）{
var userInput=document.getElementById（“用户输入”）.value；
var elOutput=document.getElementById（“用户输出”）；
elOutput.innerHTML=“用户输入：”+userInput；
var userOutput=elOutput.innerHTML；
}

当你说他们转到另一个选项卡时，你是说他们加载了一个新页面吗？如果他们这样做了，那么你的javascript变量将永远丢失…@MatthewPage不，我现在正在基于javascript构建一个导航。他们可以在选项卡之间切换，而无需离开页面。这就是它的全部要点。outerhtml不起作用？@Hasanalattar该函数除了包含外框外，还有其他与html（）不同的功能吗？如果我理解您的问题，您希望捕获html元素的“当前”状态以及任何和所有属性更改（不仅仅是值）。我不知道有什么简单的方法可以跨所有浏览器执行此操作，因为大多数浏览器仅在使用

innerHTML

、

outerHTML

或jQuery的

html（）时检索作为原始请求的一部分发送的html（而不是这些元素的当前状态）

。但是我必须检查HTML代码中可以更改的所有内容，并单独存储所有内容？正如我在问题中所说的。输入字段只是一个示例。它可能是任何东西。代码中可见或隐藏的div或所有类型的div。可能对每个方法调用onchange函数并传递值和名称，然后将数据保存到一个对象中。我已经编辑了我的答案，给出了一种可能的方法的大致想法。您应该能够看到用户键入的内容显示在输入框下方。它保存在变量userOutput中。希望这有帮助。