Javascript-LocalStorage对我来说不太合适

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

我试图在右边的列（“#derecha”）中保存div，并使用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）