Question

我一直在努力做这个简单的代码，虽然我读了localStorage的文档。我不太明白它为什么返回1.下面的代码只是HTML文件的一部分。因此，如果我们选择maxAdult值为6的id。它将返回1.我的原始HTML是否有问题，这应该可以正常工作还是我错过了什么？

第一个HTML

<select id="maxAdult">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>

<select id="maxChild">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>

<script>
  var store = document.getElementById("maxAdult");
  var value = store.value;
  localStorage.setItem("max", value);
</script>

第二个HTML

<script>
  var passen = localStorage.max;
  document.write("<br><strong style='font-size: 16px'>Number of Passengers: 
  </strong><br>");
  document.write(passen);
</script>

输出

Number of Passengers:
1

Answer 1

就像@charlietfl在评论中所说的那样，你必须实际听取change事件，以便在更新<select>元素值时更新localStorage，即：

var store = document.getElementById("maxAdult");

// Listen to onchange
store.addEventListener('change', function() {
    localStorage.setItem("max", this.value);
});

这是因为JS本质上不具有反应性，store的值不会自动更新localStorage中的对应物。

Answer 2

您的localStorage没有任何问题，但您需要在值更改时编写事件处理程序。就目前而言，您的代码仅在页面加载时运行一次。以下是使用addEventListener

的简单示例

<select id="maxAdult">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>

<select id="maxChild">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>

<script>
  var store = document.getElementById("maxAdult");
  store.addEventListener("change", function() {
    console.log(this.value);
  });
</script>

JavaScript localStorage返回1？

2 个答案: