Question

我对使用localStorage很陌生，所以请原谅我的无知和可能重复这个问题。我还没有得到任何答案。

我有一个带有很多输入标签的表格。我将它们的值存储在称为数据var data = document.querySelectorAll( "input" ).value;

的var中

当我执行window.localStorage.setItem('data', JSON.stringify(data.value))时，它将数据存储在存储器中，其值未定义。我发现我的var数据并没有真正捕获所有用户输入值，但是我不知道该怎么做。

我的目的是使var数据成为一个对象，该对象存储具有输入字段值的其他对象。然后将此数据推送到localStorage。使用纯JS

Answer 1

如注释中所述，您需要遍历输入以获取值，然后将其存储在localStorage中。例如：

const inputs = document.querySelectorAll('input');

let data = [];
for (let input of inputs) {
  data.push(input.value);
}

window.localStorage.setItem('data', data);

此外，如果您确实尝试将数据存储为JSON（也许是为什么尝试使用JSON.stringify()），则可以执行以下操作（尽管如果{{1 }}元素具有唯一的ID或名称值，您可以将其用作键，而不仅仅是下面示例中所选输入的索引）。

input

Answer 2

尝试以下代码，它将写入localStorage并从中读取到控制台（stackoverflow插入代码工具不允许与localStorage一起使用，这就是为什么代码位于不同的JS沙箱中的原因）：https://plnkr.co/edit/0e1R1aDTneQ1RA0Dvasj?p=preview

代码：

<!DOCTYPE html>
<html>
<body>
  <form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
  </form> 
  
  <script>
    let data = document.querySelectorAll("input");
    let formData=[];
    
    console.log('data', data);
    
    for(let i=0; i<data.length; i++){
      formData.push({ name: data[i].name, value: data[i].value })
    }
    
    console.log("formData for localStorage", formData)
    
    localStorage.setItem('formData', JSON.stringify(formData));
    let output = localStorage.getItem('formData');
    
    console.log('output', JSON.parse(output));

  </script>
</body>
</html>

我正在尝试将数据变量推送到本地存储中。为什么未定义？

2 个答案: