每次选中复选框，如何在本地存储中保存总分

Question

我使用带有图像的复选框构建了一个小游戏。当用户遇到图片中的项目时，他们选中该复选框，并且消息在屏幕上更改。由于这是一个导游网站和游戏，因此用户将离开该页面以查看其他页面，并在遇到该项目时选择图片。因此，我需要将复选框保存在本地存储中，以便数据持久存在。我有一些dsave复选框的javascript。

每张图片都有一个值，当单击该图片时，它将添加到总计中。如果刷新页面，关闭页面或重新打开页面，则无法使总数保持不变。

我的用于计算总数并存储复选框的JavaScript如下。

$('.dp-spotter-switch input[type="checkbox"]').click(function () {
    if (!$(this).is(':checked')) {
        $(this).parent('.dp-spotter-switch').removeClass('spotter-scale');

    } else {
        $(this).parent('.dp-spotter-switch').addClass('spotter-scale');
    }
});

function showDiv() {
    document.getElementById('getScoreLabel').style.display = "block";
}


// Total values

function totalIt() {
    var input = document.getElementsByName("product");
    var total = 0;
    for (var i = 0; i < input.length; i++) {
        if (input[i].checked) {
            total += parseFloat(input[i].value);
        }
    }
    document.getElementById("total").value = "" + total.toFixed(0);
}

// Store checkbox state

(function () {

    var boxes = document.querySelectorAll("input[type='checkbox']");
    for (var i = 0; i < boxes.length; i++) {
        var box = boxes[i];
        if (box.hasAttribute("store")) {
            setupBox(box);
        }
    }

    function setupBox(box) {
        var storageId = box.getAttribute("store");
        var oldVal = localStorage.getItem(storageId);
        console.log(oldVal);
        box.checked = oldVal === "true" ? true : false;

        box.addEventListener("change", function () {
            localStorage.setItem(storageId, this.checked);
        });
    }
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="dp-spotter-container">

    <div class="dp-top-paragraph">
        <p>Some text</p>

        <p>Click on the photos once you have spotted, and at the end click on <strong>Get Your Score</strong> to see how you've done</p>


        <div id="getScoreLabel" style="display:none; text-align: center;">
            <div class="dp-your-score-text" id="getScore">Your Score</div>
            <input value="0" readonly="readonly" type="text" id="total" class="dp-scores dp-floating"/>
        </div>
    </div>
    <br/>
    <br/>
    <!-- Spotter 1 -->
    <div class="dp-switch-container">
        <label class="dp-spotter-switch">
            <img class="dp-spotter-img" src="image.jpg">
            <input type="checkbox" name="product" value="3" id="cb1" class="spotter-check" onclick="totalIt()" store="checkbox1">
            <span class="dp-spotter-slider"></span>
            <span class="dp-spotter-text-label">Item 1- 3 Points</span>
        </label>
    </div>


    <!-- Spotter 2 -->
    <div class="dp-switch-container">
        <label class="dp-spotter-switch">
            <img class="dp-spotter-img" src="image.jpg">
            <input type="checkbox" name="product" value="3" id="cb2" class="spotter-check" onclick="totalIt()" store="checkbox2">
            <span class="dp-spotter-slider"></span>
            <p class="dp-spotter-text-label">Item 2 - 3 Points</p>
        </label>
    </div>

    <!-- Spotter 3 -->
    <div class="dp-switch-container">
        <label class="dp-spotter-switch">
            <img class="dp-spotter-img" src="image.jpg">
            <input type="checkbox" name="product" value="5" id="cb3" class="spotter-check" onclick="totalIt()" store="checkbox3">
            <span class="dp-spotter-slider"></span>
            <p class="dp-spotter-text-label">ITem 3 - 5 Points</p>
        </label>
    </div>

    <!-- Spotter 4 -->
    <div class="dp-switch-container">
        <label class="dp-spotter-switch">
            <img class="dp-spotter-img" src="image.jpg">
            <input type="checkbox" name="product" value="10" id="cb4ß" class="spotter-check" onclick="totalIt()" store="checkbox4">
            <span class="dp-spotter-slider"></span>
            <p class="dp-spotter-text-label">Item 4 - 10 Points</p>
        </label>
    </div>



    <a href="#getScore" class="dp-getScore" onclick="showDiv()">Get Your Score</a>
</div>

我正在寻找一种方法来添加到复选框的现有功能（如果可能）。

Answer 1

不幸的是，我们不能在StackOverflow可运行的代码片段中使用本地存储，因此您必须直接前往我的repl.it才能看到此方法的有效性。

由于您使用的是jQuery，因此我继续提供了jQuery解决方案：

• 使用.attr()来基于本地存储设置复选框
• 显示totalIt时称为showDiv

如果要使用现有代码，只需将box.checked = oldVal === "true" ? true : false;更改为box.setAttribute('checked', oldVal === "true" ? true : false)并将totalIt添加到showDiv函数中

演示

https://repl.it/@AnonymousSB/SO53500148

解决方案

function showDiv() {
   totalIt();
   document.getElementById('getScoreLabel').style.display = "block";
}


// Total values

function totalIt() {
  var input = document.getElementsByName("product");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }
  document.getElementById("total").value = "" + total.toFixed(0);
}

// Store checkbox state
function setupBox(box) {
  var storageId = box.attr("store");
  var oldVal    = localStorage.getItem(storageId);
  box.attr('checked', oldVal === "true" ? true : false)

  box.change(function() {
    localStorage.setItem(storageId, this.checked); 
  });
}
$(document).ready(function () {
  $( "input[type='checkbox'][store]" ).each(function( index ) {
    setupBox($( this ));
  });
})

您可以打开Chrome开发工具，转到“应用程序”，然后查看本地存储空间