Javascript-LocalStorage对我而言效果不佳

Question

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

我试图保存在右列（“ #derecha”）中，并且使用LocalStorage将divs克隆，脚本无法正常工作。

目标是：

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

＃2）-保存计数器的结果，无论它们的值如何，然后重新加载页面。

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

SEE LIVE DEMO （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")
  }
});

SEE LIVE DEMO （jsfiddle）