Javascript - 我的 LocalStorage 脚本中存在一些错误

Question

我是 JS 的新手(0 级)，虽然我尝试将我实践中的所有变量存储在 Local Storage 中，但我做错了，因为重新加载页面时许多功能(以前可见)现在消失了在重新加载中。

SEE LIVE DEMO

我的错误在哪里...？我做错了什么...？

提前致谢!

CSS

html{top:0;left:0;margin:0}body{top:0;margin:0;padding:0;color:#323232;width:100%;height:100%;line-height:1.5;font-family:'Roboto',serif}#container{width:500px;margin:0 auto}#container p{display:inline-block;margin-top:20px}#productos{display:none}.img-prod{display:inline-block;float:left;margin-right:10px}.img-prod img{width:100%;height:auto;max-width:70px;display:block;border:0}#comp-p1,#comp-p2,#comp-p3{width:120px;height:30px;margin-top:15px;background:green;padding:10px 0 5px;text-align:center;vertical-align:middle;color:#fff;cursor:pointer}.derecha{border:solid 1px #999;max-height:400px;width:350px;margin:0 auto;text-align:center;padding:10px 0;overflow-y:auto;float:right}#producto-1,#producto-2,#producto-3{display:inline-block;width:220px;padding:10px;float:left;text-align:left;font-size:.9em;margin-right:5px}#producto-1{background:green;color:#fff}#producto-2{background:#add8e6;color:#000}#producto-3{background:#666;color:#fff}.cont-p{display:inline-block;margin:7px auto;line-height:1}.bbp{display:inline-block;vertical-align:top;width:24px;height:24px;text-align:center;background:red;color:#fff;margin-left:5px;line-height:1.5;cursor:pointer}.cont-num{float:left;width:24px;height:24px;margin:20px 5px 0 20px;padding:4px 3px 3px;background:red;text-align:center;font-size:16px;font-family:Arial,sans-serif;color:#fff}#mostrar{display:none;width:100px;margin:70px 0 0;padding:10px;text-align:center;background:grey;color:#fff;cursor:pointer}.derecha input{width:0;height:0;border:none;visibility:hidden}#cont-resultado{text-align:center;width:110px;margin-top:70px;background:grey;padding:5px 10px 10px;color:#fff}#cont-resultado input{display:inline-block;margin:10px auto;background:#fff;color:#000;border:1px solid #000;padding:8px 0}#cont-resultado p{display:inline-block;text-decoration:none;color:#fff;background:grey;padding:8px 10px;cursor:pointer}#total{display:block;width:80px;text-align:center}

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!<br><br>Input Value = 1</div>

      <input class="add-prod" type="num" value="1">

      <div class="bbp">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!<br><br>Input Value = 1</div>

      <input class="add-prod" type="num" value="1">

      <div class="bbp">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!<br><br>Input Value = 198</div>

      <input class="add-prod" type="num" value="198">

      <div class="bbp">X</div>
    </div>

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

  </div><!-- // productos -->

  <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="cont-resultado">
    <input name="total" id="total">
    Total of sum
  </div>

</div>
<!-- // container -->

<script>
// Script que suma y resta los clicks

  var clicks = 0;

  function clickME() {
    clicks += 1;
    document.getElementById("clicks").innerHTML = clicks
  }
  var clicksdos = 0;

  function clickME2() {
    clicksdos += 1;
    document.getElementById("clicksdos").innerHTML = clicksdos;

    if (clicksdos === 1) {
      document.getElementById("cont-resultado").style.display = "block";
    }
  }
  if (clicksdos === 0) {
    document.getElementById("cont-resultado").style.display = "none";
  }

  function restar() {
    if (clicks > 0) clicks -= 1;
    document.getElementById("clicks").innerHTML = clicks;
  }

  function restardos() {
    if (clicksdos > 0) clicksdos -= 1;
    document.getElementById("clicksdos").innerHTML = clicksdos;
    if (clicksdos === 0) {
      document.getElementById("cont-resultado").style.display = "none";
    }
  }
</script>

脚本

// Script for clone the div´s

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

const getParent = (match, node) => (node.matches(match)) ? node : getParent(match, node.parentNode);

// Deal with remove
document.addEventListener('click', (event) => {
  let target = event.target;
  if (target.matches('.bbp')) {
    restar();
    restardos();
    getParent('.derecha', target).removeChild(target.parentNode);
    localStorage.setItem("html",document.getElementsByClassName("derecha")[0].innerHTML); // New
    displaySuma();
  }
})

// New Script for sum inputs
const displaySuma = () => document.getElementById("total").value = suma();

const suma = function() {
  let x = Array.from(document.querySelectorAll(".derecha div .add-prod"));
  let sum = 0;
  for (var i = 0; i < x.length; i++) {
    sum += parseFloat(x[i].value);
  }
  console.log(sum);
  return sum;
  localStorage.setItem("html",document.getElementsByClassName("derecha")[0].innerHTML); // New
}
//console.log(suma());
document.getElementById("total").value = suma();

// New

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")
  }

//});

Answer 1

这是一个使用 localStorage 的版本，不幸的是片段不允许使用 localStorage。

因此，这里是一个版本的 code running in jsFiddle

let clicks = 0;
let clicksdos = 0;

const safeInt = (key) => {
  let value = parseInt(getValue(key));
  return (isNaN(value) || value < 0) ? 0 : value;
}

// This loads our clicks from the LocalStorage
const loadClicks = () => {
  clicks = safeInt('clicks');
  clicksdos = safeInt('clicksdos');
}

const loadHTML = () => {
  return getValue('html', '');
}

const loadFromStorage = () => {
  let html = loadHTML();
  if (html !== '') {
    loadClicks();
  }
  displayClicks();
  document.querySelector(".derecha").innerHTML = html;
}

// Display the clicks on the screen
const displayClicks = () => {
  clicks = (clicks === NaN) ? 0 : clicks;
  clicksdos = (clicksdos === NaN) ? 0 : clicksdos;
  document.querySelector('#clicks').innerHTML = clicks;
  document.querySelector('#clicksdos').innerHTML = clicksdos;
  // Hide / Show Result 
  let display = (clicks > 0) ? 'block' : 'none';
  document.querySelector('#cont-resultado').style.display = display;
}

const adjustClicks = (value) => {
  clicks += value;
  clicksdos += value;
  storeValue('clicks', clicks);
  storeValue('clicksdos', clicksdos);
  displayClicks();
}
const addClick = () => adjustClicks(1);
const removeClick = () => adjustClicks(-1);


// Manage localStorage
const storeValue = (key, value) => (localStorage) ? localStorage.setItem(key, value) : '';
const getValue = (key, defaultValue) => (localStorage) ? localStorage.getItem(key) : defaultValue;
const storeHTML = () => storeValue("html", document.getElementsByClassName("derecha")[0].innerHTML);

// Add a node to the Derecha
const addToDerecha = (nodeId) => {
  let node = document.querySelector(`#${nodeId}`);
  document.querySelector('.derecha').appendChild(node.cloneNode(true));
  storeHTML();
  displaySuma();
};

// Monitor ALL click events 
document.addEventListener('click', (event) => {
  let target = event.target;
  // Add
  if (target.matches('.comp-clone')) {
    addClick();
    addToDerecha(event.target.dataset.clone);
  }
  // Remove
  if (target.matches('.bbp')) {
    removeClick();
    getParent('.derecha', target).removeChild(target.parentNode);
    storeHTML();
    displaySuma();
  }
});

// This is just a helper function.
const getParent = (match, node) => (node.matches(match)) ? node : getParent(match, node.parentNode);

// New Script for sum inputs
const displaySuma = () => document.getElementById("total").value = suma();

const suma = function() {
  return Array.from(document.querySelectorAll(".derecha div .add-prod"))
    .reduce((a, v) => a + parseFloat(v.value), 0);
}

// Code to run when the document loads.
document.addEventListener('DOMContentLoaded', () => {
  if (localStorage) {
    loadFromStorage();
  }

  displaySuma();

});

body {
  margin: 0 auto;
  color: #323232;
  width: 100%;
  height: 100%;
  line-height: 1.5;
  font-family: 'Roboto', serif
}

#container {
  width: 500px;
  margin: 0 auto
}

#container p {
  display: inline-block;
  margin-top: 20px
}

span {
  font-weight: bold;
  text-decoration: underline
}

#productos {
  display: none
}

.img-prod {
  display: inline-block;
  float: left;
  background: #000;
  margin-right: 10px
}

.img-prod img {
  width: 100%;
  height: auto;
  max-width: 70px;
  display: block;
  border: 0
}

#comp-p1,
#comp-p2,
#comp-p3 {
  width: 120px;
  height: 30px;
  margin-top: 15px;
  background: green;
  padding: 10px 0 5px;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  cursor: pointer
}

.derecha {
  border: solid 1px #999;
  max-height: 400px;
  width: 350px;
  margin: 0 auto;
  text-align: center;
  padding: 10px 0;
  overflow-y: auto;
  float: right
}

#producto-1,
#producto-2,
#producto-3 {
  display: inline-block;
  width: 220px;
  padding: 10px;
  float: left;
  text-align: left;
  font-size: .9em;
  margin-right: 5px
}

#producto-1 {
  background: green;
  color: #fff
}

#producto-2 {
  background: #add8e6;
  color: #000
}

#producto-3 {
  background: #666;
  color: #fff
}

.cont-p {
  display: inline-block;
  margin: 7px auto;
  line-height: 1
}

.bbp {
  display: inline-block;
  float: right;
  width: 24px;
  height: 24px;
  text-align: center;
  background: red;
  color: #fff;
  margin-left: 5px;
  line-height: 1.5;
  cursor: pointer
}

.cont-num {
  float: left;
  width: 24px;
  height: 24px;
  margin: 20px 5px 0 18px;
  padding: 4px 3px 3px;
  background: red;
  text-align: center;
  font-size: 16px;
  font-family: Arial, sans-serif;
  color: #fff
}

#mostrar {
  display: none
}

#mostrar {
  width: 100px;
  margin: 70px 0 0;
  padding: 10px;
  text-align: center;
  background: grey;
  color: #fff;
  cursor: pointer
}


/* ==== Style of Sume ==== */

.derecha input {
  width: 40px;
  display: block;
  margin: 0 auto 10px 0;
  padding: 2px 0;
  background: #f2f2f2;
  border: none;
  border: 1px solid #000;
  text-align: center
}

#cont-resultado {
  text-align: center;
  width: 110px;
  margin-top: 70px;
  background: grey;
  padding: 5px 10px 10px;
  color: #fff
}

#cont-resultado input {
  display: inline-block;
  margin: 10px auto;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  padding: 8px 0
}

#cont-resultado p {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  background: grey;
  padding: 8px 10px;
  cursor: pointer
}

#total {
  display: block;
  width: 80px;
  text-align: center
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <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!<br><br>Input Value = 1</div>

        <input class="add-prod" type="num" value="1">

        <div class="bbp">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!<br><br>Input Value = 1</div>

        <input class="add-prod" type="num" value="1">

        <div class="bbp">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!<br><br>Input Value = 198</div>

        <input class="add-prod" type="num" value="198">

        <div class="bbp">X</div>
      </div>
      <!-- =============== -->
    </div>
    <!-- // productos -->

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

    <div id="comp-p1" data-clone="cont-p1" class="comp-clone">Clone 1</div>
    <div id="comp-p2" data-clone="cont-p2" class="comp-clone">Clone 2</div>
    <div id="comp-p3" data-clone="cont-p3" class="comp-clone">Clone 3</div>

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

    <div id="cont-resultado">
      <span>RESULT:</span><br>
      <input name="total" id="total">
      <br>Is the sum of the cloned divs
      <!--<p id='sumup'>Ver total</p>-->
    </div>

    <p><span>NOTE:</span><br>Here we are looking for only the cloned inputs can be sumed (and see the result in the box color gray).<br><br>The problem is that the current script does not apply a sume of the cloned inputs only... it adds ALL the inputs presents
      in the html...<br><br>So (1), how do you sum only the cloned inputs, ignoring those that are outside...?<br><br>And (2) also, how to subtract from the total result all the cloned divs that are deleted...?</p>

  </div>
  <!-- // container -->
  <script src="script.js"></script>
</body>

</html>