Javascript 如何在每次选中复选框时在localstorage中保存总分

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

每幅图片都有一个值，单击该图像时，它将添加到总图像中。如果刷新或关闭并重新打开页面，我无法保持此总数

下面是我计算总数和存储复选框的javascript

$（'.dp监视开关输入[type=“checkbox”]”）。单击（函数（）{
如果（！$（this）.is（':checked'））{
$（this）.parent（'.dp spotter switch'）.removeClass（'spotter-scale'）；
}否则{
$（this）.parent（'.dp spotter switch'）.addClass（'spotter-scale'）；
}
});
函数showDiv（）{
document.getElementById（'getScoreLabel'）.style.display=“block”；
}
//总价值
函数totalIt（）{
var输入=document.getElementsByName（“产品”）；
var合计=0；
对于（变量i=0；i

一些文本

一旦你发现了，点击照片，最后点击获取你的分数查看你的表现

你的分数




项目1-3分
第2项-3分

第3项-5分

第4项-10分

不幸的是，我们无法在StackOverflow可运行代码段中使用本地存储，因此您必须转到my repl.it以查看此操作

既然您使用的是jQuery，我就提供了一个jQuery解决方案：


使用
.attr（）
根据本地存储设置复选框
显示
showDiv

如果要使用现有代码，只需更改
box.checked=oldVal==“true”？真：假
到
box.setAttribute（'checked'，oldVal==“true”？true:false）
并将
totalIt
添加到
showDiv
函数中

演示

解决方案
函数showDiv（）{
totalIt（）；
document.getElementById（'getScoreLabel'）.style.display=“block”；
}
//总价值
函数totalIt（）{
var输入=document.getElementsByName（“产品”）；
var合计=0；
对于（变量i=0；i

您可以打开Chrome开发工具，转到应用程序，并查看您的本地存储

快速目视检查表明JS代码似乎正确；问题很有可能出现在HTML文件中；我也建议在问题中加入它。我已经在我的html和其他javascript中添加到我的问题中了。谢谢你的帮助，不幸的是，由于某种原因，这不起作用。我一刷新页面，一切都会重置。我用来存储复选框的代码工作得很好，但我实际上需要确保在刷新页面时计算出的总数也保持不变。谢谢，这工作得很好。不幸的是，我被迫使用的糟糕的CMS不断删除这项工作所需的html部分，因此我不得不找到另一种解决方法，但您帮助我存储页面刷新总数的代码起到了charmGlad的作用
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 ));
  });
})