javascript - Javascript - LocalStorage 不适合我

Question

我的 LocalStorage 脚本存在严重问题（我是 0 级初学者），我没有达到我的目标。

我试图在右列（“#derecha”）中保存，并使用 LocalStorage 克隆 div，并且脚本运行不佳。

目标是：

#1) - 将克隆的 div 保存在右列中，无论它在重新加载页面之前是否可见。

#2) - 在重新加载页面之前保存计数器的结果，无论它们的值是什么。

#3) - 保存 div 灰色（“显示”），无论它在重新加载页面时是否可见。

观看现场演示（jsfiddle）

注意： 如果您在测试中查看并重新加载页面，则克隆的 div，即使它们被删除，也会在重新加载页面后重新出现。

我在这里做错了什么，最好的解决方案是什么......？

提前致谢！

HTML + 脚本

<div id="container">

<!-- =============== -->
<div id="productos">

<!-- =============== -->

<div id="cont-p1" class="cont-p"><div id="producto-1"><div class="img-prod"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png">       </div>Cont-p1 cloned!</div>

<div class="bbp" onclick="restar();restardos();this.parentNode.parentNode.removeChild(this.parentNode);">X</div></div>
<!-- =============== -->

<div id="cont-p2" class="cont-p"><div id="producto-2"><div class="img-prod"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png"></div>
  Cont-p2 cloned!</div>

<div class="bbp" onclick="restar();restardos();this.parentNode.parentNode.removeChild(this.parentNode);">X</div></div>
<!-- =============== -->

<div id="cont-p3" class="cont-p"><div id="producto-3"><div class="img-prod"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png"></div>
  Cont-p3 cloned!</div>

<div class="bbp" onclick="restar();restardos();this.parentNode.parentNode.removeChild(this.parentNode);">X</div></div>
<!-- =============== -->
</div> <!-- // container -->

<div class="derecha"></div>

<div id="comp-p1" onClick="clickME();clickME2();">Clone 1</div>
<div id="comp-p2" onClick="clickME();clickME2();">Clone 2</div>
<div id="comp-p3" onClick="clickME();clickME2();">Clone 3</div>

<div class="cont-num" id="clicks">0</div>
<div class="cont-num" id="clicksdos">0</div>

<div id="mostrar"><span>Show</span></div>

</div>

<script>

// Script that adds and subtracts the clicks

var clicks=0;function clickME(){clicks += 1;
localStorage.setItem('clicks', clicks);
document.getElementById("clicks").innerHTML=clicks}

var clicksdos=0;function clickME2(){clicksdos += 1;
localStorage.setItem('clicksdos', clicksdos);
document.getElementById("clicksdos").innerHTML=clicksdos;

if (clicksdos === 1) {
document.getElementById("mostrar").style.display = "block";
    }
}
if (clicksdos === 0) {
document.getElementById("mostrar").style.display = "none";
    }
function restar() {
if (clicks>0) clicks -= 1;
localStorage.setItem('clicks', clicks);
document.getElementById("clicks").innerHTML=clicks;
    }
function restardos() {
if (clicksdos>0) clicksdos -= 1;
localStorage.setItem('clicksdos', clicksdos);
document.getElementById("clicksdos").innerHTML=clicksdos;
if(clicksdos === 0){
document.getElementById("mostrar").style.display = "none";
    }
};
</script>

---

脚本

// Script that clones the cont-p in the div "right"

 $(document).ready(function() {
      $("#comp-p1").click(function(){
        $("#cont-p1").clone().appendTo(".derecha");
        localStorage.setItem("html",document.getElementsByClassName("derecha")[0].innerHTML);
      });
      // =============
      $("#comp-p2").click(function(){
        $("#cont-p2").clone().appendTo(".derecha");
        localStorage.setItem("html",document.getElementsByClassName("derecha")[0].innerHTML);
      });
      // =============
      $("#comp-p3").click(function(){
        $("#cont-p3").clone().appendTo(".derecha");
        localStorage.setItem("html",document.getElementsByClassName("derecha")[0].innerHTML);
      });

if ((localStorage.getItem("clicks")!=null) && (localStorage.getItem("clicksdos")!=null))
  {
    clicks=parseInt(localStorage.getItem("clicks"));
    clicksdos=parseInt(localStorage.getItem("clicksdos"));
    document.getElementById("clicks").innerHTML=clicks;
    document.getElementById("clicksdos").innerHTML=clicksdos;
  }
  if (localStorage.getItem("html")!=null)
  {
    document.getElementsByClassName("derecha")[0].innerHTML=localStorage.getItem("html")
  }
});

观看现场演示（jsfiddle）

标签： javascripthtmllocal-storage