时间戳

首页 > 解决方案 > 本地存储/复选框/不显示值

javascript - 本地存储/复选框/不显示值

问题描述

我尝试使用本地存储将复选框值打印到另一个 HTML 页面，但它没有显示到另一个 HTML 页面

这是我的 page1 HTML

<input class="checkbox" type="checkbox" id="option1" name="car1" value="BMW">
            <label for="vehicle1">BMW</label><br>
            <input class="checkbox" type="checkbox" id="option2" name="car2" value="Ferrari">
            <label for="vehicle2">Ferrari</label><br>
            <input checkbox="checkbox" type="checkbox" id="option3" name="car3" value="Ford">
            <label for="vehicle3">Ford</label><br>
            <input class="checkbox" type="checkbox" id="option4" name="car4" value="Audi">
            <label for="vehicle4">Audi</label><br>
            <input class="checkbox" type="checkbox" id="option5" name="car5" value="Cadillac">
            <label for="vehicle5">Cadillac</label><br>

这是我的javascript代码

for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == "checkbox" && inputs[i].checked) {
            count2++;
            localStorage.setItem("checkvalue", inputs[i].value);

        }
    }

<script>
// page2 HTML
            <span id="result"></span>,Welcome
            document.getElementById("result").innerHTML = localStorage.getItem("checkvalue");
        </script>

标签： javascripthtmlcss

解决方案

正如@SMAKSS 所提到的，您在每次迭代时都会覆盖您的本地存储。

代替

for (var i = 0; i < inputs.length; i++) {
  if (inputs[i].type == "checkbox" && inputs[i].checked) {
    count2++;
    localStorage.setItem("checkvalue", inputs[i].value);
  }
}

你应该

localStorage.setItem("results", JSON.stringify(inputs));

并通过以下方式检索它

JSON.parse(localStorage.getItem("results"));

推荐阅读