javascript - 如何根据用户的点击次数排序链接的顺序并使用JavaScript将其保存到本地存储？

Question

我正在尝试添加功能以根据用户单击链接的次数对特定 div 中的链接顺序进行排序。这是固定到用户最喜欢的链接的顶部。它还必须保存在 localStorage...

例如，我有这个:

function clickCounter1() {
  if (typeof(Storage) !== "undefined") {
    if (localStorage.getItem(`clickcount1`)) {
      localStorage.setItem(`clickcount1`, Number(localStorage.getItem(`clickcount1`)) + 1);
    } else {
      localStorage.setItem(`clickcount1`, 1);
    }
    document.getElementById(`result1`).textContent = `Btn ABC: ` + localStorage.getItem(`clickcount1`);
  }
}

function clickCounter2() {
  if (typeof(Storage) !== "undefined") {
    if (localStorage.getItem(`clickcount2`)) {
      localStorage.setItem(`clickcount2`, Number(localStorage.getItem(`clickcount2`)) + 1);
    } else {
      localStorage.setItem(`clickcount2`, 1);
    }
    document.getElementById("result2").textContent = "Btn 123: " + localStorage.clickcount2;
  }
}

function clickCounter3() {
  if (typeof(Storage) !== "undefined") {
    if (localStorage.getItem(`clickcount3`)) {
      localStorage.setItem(`clickcount3`, Number(localStorage.getItem(`clickcount3`)) + 1);
    } else {
      localStorage.setItem(`clickcount3`, 1);
    }
    document.getElementById("result3").textContent = "Btn ZZZ: " + localStorage.clickcount3;
  }
}

function clickCounter4() {
  if (typeof(Storage) !== "undefined") {
    if (localStorage.getItem(`clickcount4`)) {
      localStorage.setItem(`clickcount4`, Number(localStorage.getItem(`clickcount4`)) + 1);
    } else {
      localStorage.setItem(`clickcount4`, 1);
    }
    document.getElementById("result4").textContent = "Btn ZZZ: " + localStorage.clickcount4;
  }
}

function clickCounter5() {
  if (typeof(Storage) !== "undefined") {
    if (localStorage.getItem(`clickcount5`)) {
      localStorage.setItem(`clickcount5`, Number(localStorage.getItem(`clickcount5`)) + 1);
    } else {
      localStorage.setItem(`clickcount5`, 1);
    }
    document.getElementById("result5").textContent = "Btn ZZZ: " + localStorage.clickcount5;
  }
}

a {
  display: block;
}

<div id="links-list">
  <a href="#" id="one" onclick="clickCounter1()">A</a>
  <a href="#" id="two" onclick="clickCounter2()">B</a>
  <a href="#" id="three" onclick="clickCounter3()">C</a>
  <a href="#" id="four" onclick="clickCounter4()">D</a>
  <a href="#" id="five" onclick="clickCounter5()">E</a>
</div>

<br>

<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
<div id="result4"></div>
<div id="result5"></div>

如果用户点击C次数最多，它应该在最前面。我一直在网上搜索，但找不到这样的解决方案。

Answer 1

下面的乱七八糟的代码应该可以满足您的需要。它将点击次数存储在 localStorage 中并根据它重新排序。我重写了点击计数器代码，因为它更高效且重复更少。

注意:以下代码在代码段中不起作用，因为 Stack Overflow 不允许在其代码段中使用 localStorage。

function updateClicks(ele) {
  const storage = window.localStorage.getItem(ele.innerHTML + "Clicks");
  if (storage === null) {
    window.localStorage.setItem(ele.innerHTML + "Clicks", "1");
  } else {
    var clicks = parseInt(window.localStorage.getItem(ele.innerHTML + "Clicks")) + 1;
    localStorage.removeItem(ele.innerHTML + "Clicks");
    window.localStorage.setItem(ele.innerHTML + "Clicks", clicks);
  }
}

function orderItems() {
  var order = [];
  var href = [];
  var links = document.getElementById("links-list");
  var link = links.getElementsByTagName("a");
  for (i = 0; i < link.length; i++) {
    href.push(link[i].href);
  }
  links = links.innerHTML.split("</a>");
  document.getElementById("links-list").innerHTML = "";
  for (i = 0; i < links.length - 1; i++) {
    var lastChar = links[i].charAt(links[i].length - 1);
    var clicks = parseInt(window.localStorage.getItem(lastChar + "Clicks"));
    if (isNaN(clicks)) {
      clicks = 0;
    }

    order.push([lastChar, clicks, href[i]]);
  }
  order.sort(function(a, b) {
    return a[1] - b[1]
  });
  order.reverse();
  console.log(order)
  for (i = 0; i < order.length; i++) {
                document.getElementById("links-list").innerHTML += "<a href='" + order[i][2] + "'  onclick='updateClicks(this)'>" + order[i][0] + "</a>";
  }
}

a {
  display: block;
}

<div id="links-list">
  <a href="#" onclick="updateClicks(this)">A</a>
  <a href="#" onclick="updateClicks(this)">B</a>
  <a href="#" onclick="updateClicks(this)">C</a>
  <a href="#" onclick="updateClicks(this)">D</a>
  <a href="#" onclick="updateClicks(this)">E</a>
</div>