将多个输入保存到localStorage

Question

我正在尝试将多个输入保存到localStorage。我为此目的使用了'for'循环，但它为所有三个输入保存了相同的值。我想要单独的foreach值，而不是所有的值：

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var j = document.getElementsByName('emploi').length;
    var i;

    for(i=0; i<=j; i++) {

      var x = document.getElementsByName('emploi')[i];

      x.value = localStorage['emploi'];

      x.onchange = function() {
        localStorage['emploi'] = this.value;
      }
    }
  });
</script>

<!--Html-->

<!--SALE-->
<input type="text"  name='emploi' placeholder='Sale'>

<!--les prof-->
<input type="text"  name='emploi' placeholder='Professeur'>

<!--les classes-->
<input type="text"  name='emploi' placeholder='Class'>

Answer 1

存储JSON.stringified对象而不是简单的字符串值，否则您对所有3使用相同的值

document.addEventListener('DOMContentLoaded', function() {
  // parse stored JSON if it exists otherwise an empty object 
  var values = JSON.parse(localStorage.getItem('emploi') || '{}');

  var inputs = document.getElementsByName('emploi');


  for (let i = 0; i < inputs.length; i++) {
    var x = inputs[i];
    x.value = values[i] || '';// stored value if it exists or empty string

    x.onchange = function() {
      // assign value to the object above
      values[i] = this.value;
      // store updated version of object
      localStorage.setItem('emploi', JSON.stringify(values));
    }
  }

});

Answer 2

您的主要问题似乎是知道如何将数据保存到localStorage。您需要根据以下语法重写代码。

• SAVING数据到localStorage的语法：

localStorage.setItem("key", "value");

• 从localStorage读取数据的语法：

const lastname = localStorage.getItem("key");

• 从localStorage中删除数据的语法：

localStorage.removeItem("key");