Question

我正在尝试找出一种更好的方法来执行下面的代码。它的作用是在localstorage中保存一个时间戳，以便知道上次链接该链接的时间，然后在时间用完时显示。但如果我想添加更多链接，那将是很多复制粘贴... 有人可以帮助我如何循环“保存并加载”脚本？也许可以在链接中添加要计算的分钟数而不是在脚本中？

这就是我现在的做法：

<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="checkLocalStorage()">
   <a onclick="saveTime01()" id="linkID01" href="#">Link1</a>
   <a onclick="saveTime02()" id="linkID02" href="#">Link2</a>
   <a onclick="saveTime03()" id="linkID03" href="#">Link3</a>
   <a onclick="saveTime04()" id="linkID04" href="#">Link4</a>
</body>
</html>

在我的script.js

中

function checkLocalStorage() {
    setInterval(function(){
        if("linkValue01" in localStorage){
            var storedTime = localStorage.getItem("linkValue01");
            var timeNow = new Date().getTime();
            var minutesFromLastClick = (timeNow - storedTime)/60000;
            if(minutesFromLastClick > 30) {
                document.getElementById("linkID01").style.display = "inline";
            }
            else {
                document.getElementById("linkID01").style.display = "none";
            }
        }
        if("linkValue02" in localStorage){
            var storedTime = localStorage.getItem("linkValue02");
            var timeNow = new Date().getTime();
            var minutesFromLastClick = (timeNow - storedTime)/60000;
            if(minutesFromLastClick > 180) {
                document.getElementById("linkID02").style.display = "inline";
            }
            else {
                document.getElementById("linkID02").style.display = "none";
            }
    }
    if("linkValue03" in localStorage){
            var storedTime = localStorage.getItem("linkValue03");
            var timeNow = new Date().getTime();
            var minutesFromLastClick = (timeNow - storedTime)/60000;
            if(minutesFromLastClick > 120) {
                document.getElementById("linkID03").style.display = "inline";
            }
            else {
                document.getElementById("linkID03").style.display = "none";
            }
    }
    if("linkValue04" in localStorage){
            var storedTime = localStorage.getItem("linkValue04");
            var timeNow = new Date().getTime();
            var minutesFromLastClick = (timeNow - storedTime)/60000;
            if(minutesFromLastClick > 10) {
                document.getElementById("linkID04").style.display = "inline";
            }
            else {
                document.getElementById("linkID04").style.display = "none";
            }
    }
    }, 1000);
}


function saveTime01(){
    var object = new Date().getTime();
    localStorage.setItem("linkValue01", JSON.stringify(object));
    document.getElementById("linkID01").style.display = "none";
}
function saveTime02(){
    var object = new Date().getTime();
    localStorage.setItem("linkValue02", JSON.stringify(object));
    document.getElementById("linkID02").style.display = "none";
}
function saveTime03(){
    var object = new Date().getTime();
    localStorage.setItem("linkValue03", JSON.stringify(object));
    document.getElementById("linkID03").style.display = "none";
}
function saveTime04(){
    var object = new Date().getTime();
    localStorage.setItem("linkValue04", JSON.stringify(object));
    document.getElementById("linkID04").style.display = "none";
}

Answer 1

我想你可以这样做 -

  <a class="tracker" id="linkValue1" data-id="1" href="#">Link1</a>
  <a class="tracker" id="linkValue2" data-id="2" href="#">Link2</a>
  <a class="tracker" id="linkValue3" data-id="3" href="#">Link3</a>
  <a class="tracker" id="linkValue4" data-id="4" href="#">Link4</a>

现在使用Javascript -

 $(".tracker").on("click",handleClick);

 function handleClick(){
     var ele = $(this),
         object = new Date().getTime(),
         id = ele.data("id"); 

     localStorage.setItem("linkValue"+id, JSON.stringify(object));
     document.getElementById("linkID"+id).style.display = "none";
  }

 function checkLocalStorage() {
      var numLinks = $(".tracker").length;
      setInterval(function(){
         for(var i = 0; i< numLinks.length;++i){
              var item = "linkValue"+numLinks[i],
                  eleID = "linkID"+numLinks[i];
              if(item in localStorage){
                   var storedTime = localStorage.getItem(item);
                   var timeNow = new Date().getTime();
                   var minutesFromLastClick = (timeNow - storedTime)/60000;
                   if(minutesFromLastClick > 30) {
                      document.getElementById(eleID).style.display = "inline";
                  }
                  else {
                       document.getElementById(eleID).style.display = "none";
                  }
               }
            }
         }
    }

Answer 2

使用一个具有不同参数的函数可以避免多个函数。在interval中，编写for-loop可以减少许多代码行，并且还可以使代码可读。

＆＃13;

function checkLocalStorage() {
  setInterval(function() {
    for (var i = 1, iLen = 4; i <= iLen; i++) {
      if ("linkValue0" + i in localStorage) {
        var storedTime = localStorage.getItem("linkValue0" + i);
        var timeNow = new Date().getTime();
        var minutesFromLastClick = (timeNow - storedTime) / 60000;
        if (minutesFromLastClick > 30) {
          document.getElementById("linkID0" + i).style.display = "inline";
        } else {
          document.getElementById("linkID0" + i).style.display = "none";
        }
      }
    }
  }, 1000);
}


function saveTime(key, id) {
  var object = new Date().getTime();
  localStorage.setItem(key, JSON.stringify(object));
  document.getElementById(id).style.display = "none";
}

＆＃13;

<body onload="checkLocalStorage()">
  <a onclick="saveTime('linkValue01',this.id)" id="linkID01" href="#">Link1</a>
  <a onclick="saveTime('linkValue02',this.id)" id="linkID02" href="#">Link2</a>
  <a onclick="saveTime('linkValue03',this.id)" id="linkID03" href="#">Link3</a>
  <a onclick="saveTime('linkValue04',this.id)" id="linkID04" href="#">Link4</a>
</body>

＆＃13;

Fiddle here

有什么更好的方法来设置和获取LocalStorage？

2 个答案: