如何在动态填充的文本框中使用 Localstorage？答案

【问题标题】：How to use Localstorage in textboxes that are populated dynamically?如何在动态填充的文本框中使用 Localstorage？
【发布时间】：2014-01-24 01:47:21
【问题描述】：

我正在尝试使用 localstorage 保存在文本框中输入的内容。

<input type='text' id='input1' name='discount_" +itemResultSet.getInt(5)+"' />
<input type='text' id='input2' name='note_" +itemResultSet.getInt(5)+"'/>

这是我的脚本：

   <script>
     document.getElementById('input1').onblur = function() {
    var in1 = document.getElementById('input1').value;
    localStorage.setItem('txtObjectid1', in1);
         };
     document.getElementById('input2').onblur = function() {
    var in2 = document.getElementById('input2').value;
        localStorage.setItem('txtObjectid2', in2);
        };
     document.getElementById('input1').value = localStorage.getItem('txtObjectid1');
     document.getElementById('input2').value = localStorage.getItem('txtObjectid2');
   </script>

编辑：

这些相同的文本框出现不止一次，我的问题是文本框的内容仅在前两个文本框中保存和检索，它不适用于相同文本框的下一个填充。

【问题讨论】：

您使用的是getElementsByClassName，但您的输入实际上有ids。
哎呀，我必须编辑它。
您是否为每个文本框分配了单独的 ID，或者页面上是否有多个 ID 为 input1 的元素？
页面上有多个ID为input1的元素

标签： javascript textbox local-storage

【解决方案1】：

虽然localStorage 是一个对象，但它确实提供了一个 API，我建议您使用它，因为如果您设置/获取数据不正确，它更具描述性并且更易于调试。

我编写了一个非常小的 (local|session)Storage 行为，以简化设置和获取数据：

https://github.com/toddmotto/vault/blob/master/dist/vault.js

它还在README.md中提供了一些示例。

使用 Chrome 开发工具，您还可以查看 localStorage 面板并确保您的数据设置正确 - 这就是您需要查看的全部内容：)

【讨论】：

我已编辑问题以更好地阐明我的问题。

【解决方案2】：

要保存 localStorage 内容，您必须使用 window.localStorage.setItem(key, value) 并获取它 window.localStorage.setItem(key)

这是一个工作示例：http://jsfiddle.net/hBTvA/1/

【讨论】：

是的，它奏效了。我已经编辑了我的问题以更好地澄清我的问题。