将多个输入保存到localStorage

时间:2018-06-02 23:09:48

标签: javascript html

我试图将多个输入保存到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'>

2 个答案:

答案 0 :(得分:0)

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

  • 将数据保存到localStorage的语法:

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

  • 从localStorage读取数据的语法:

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

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

localStorage.removeItem("key");

答案 1 :(得分:0)

存储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));
    }
  }

});