Как я могу сохранить общий счет в местном хранилище каждый раз, когда флажок установлен

Question

Я создал небольшую игру, используя флажки с изображениями.Когда пользователь сталкивается с элементом на картинке, он устанавливает флажок, и сообщение меняется на экране.Поскольку это сайт с туристическим гидом и игра, пользователь покидает страницу, чтобы посмотреть другие страницы, выбирая картинки по мере их появления.Поэтому мне нужно было сохранить флажки в локальном хранилище, чтобы данные сохранялись.У меня есть некоторый 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 Dev Tools, перейти в Приложение и просмотреть локальное хранилище