javascript - 制作 2 个具有不同存储空间的柜台

Question

我要做更多，所以只需要帮助如何使它们不同的计数器，我厌倦了谷歌和一些 html 文档，但没有找到方法。

function clickCounter() {
  if (typeof(Storage) !== "undefined") {
    if (localStorage.clickcount) {
      localStorage.clickcount = Number(localStorage.clickcount) + 1;
    } else {
      localStorage.clickcount = 1;
    }
    document.getElementById("result").innerHTML = "Sälj  " + localStorage.clickcount + "  st.";
  } else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
  }
}

function clickCounter(b) {
  if (typeof(Storage) !== "undefined") {
    if (localStorage.clickcountr) {
      localStorage.clickcountr = Number(localStorage.clickcountr) + 1;
    } else {
      localStorage.clickcountr = 2;
    }
    document.getElementById("resultr").innerHTML = "Annu  " + localStorage.clickcountr + "  st.";
  } else {
    document.getElementById("resultr").innerHTML = "Sorry, your browser does not support web storage...";
  }
}

<p><button onclick="clickCounter()" type="button">Sälj!</button></p>
<div id="result"></div>

<p><button onclick="clickCounter(b)" type="button">Annu!</button></p>
<div id="resultr"></div>

1. --Sälj = 第一个柜台
2. --Annu = 第二个计数器

Answer 1

问题是您以相同的方式命名函数。因此，第二个函数会覆盖第一个函数，结果，两个函数都调用同一个函数。

通常您不需要编写两个不同的函数来执行相同的操作。在您的情况下，您的 JavaScript 函数应如下所示:

function clickCounter(id, label) {
    var node = document.getElementById(id);
    if (!node) {
        return console.error('Element #' + id + ' not found');
    }

    if (window.localStorage === undefined) {
        node.innerHTML = 'Sorry, your browser does not support web storage...';
    } else {
        var key = 'clickcount_' + id;
        localStorage[key] = (++localStorage[key] || 1);
        node.innerHTML = label + ' ' + localStorage[key] + ' st.';
    }
}

还有你的按钮:

<p><button onclick="clickCounter('result', this.innerHTML)" type="button">Sälj!</button></p>
<div id="result"></div>

<p><button onclick="clickCounter('resultr', this.innerHTML)" type="button">Annu!</button></p>
<div id="resultr"></div>