有没有更好的方法来设置和从 LocalStorage 获取？答案

【问题标题】：Any better way to set and get from LocalStorage?有没有更好的方法来设置和从 LocalStorage 获取？
【发布时间】：2015-12-16 03:16:00
【问题描述】：

我正在尝试找出一种更好的方法来完成我下面的代码所做的事情。它的作用是在本地存储中保存一个时间戳，以了解上次单击该链接的时间，然后在时间用完时出现。但是如果我想添加更多链接，那将是很多复制粘贴...... 有人可以帮我如何通过“保存和加载”脚本循环吗？并且也许在链接中而不是在脚本中添加要计算的分钟数？

这就是我现在的做法：

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

【问题讨论】：

标签： javascript arrays html local-storage

【解决方案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";
                  }
               }
            }
         }
    }

【讨论】：

找不到有问题的 jquery 标记。
由于没有提及，我使用了 jquery :) 也可以为 javascript 添加相同的逻辑。优化保持不变。

【解决方案2】：

您可以避免使用多个函数一个具有不同参数的函数。在interval中，写for-loop可以减少很多代码行，也会让你的代码可读..

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

<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>

Fiddle here

【讨论】：

哇，超快的答案！但是这段代码确实同时重置了所有 4 个链接，对吧？
这正是我一直在寻找的，但如果我很愚蠢，很抱歉，现在已经醒了一段时间了。但是我在哪里设置链接再次出现的单独时间？在我的示例中，链接 1 是 30 分钟，链接 2 是 180 分钟等...我可以在链接中设置这些值吗？
好的，我会尝试这样做，我在编程方面很菜鸟，你介意写一个例子还是小提琴？
我越尝试越困惑...有人可以看看这个小提琴并帮助我..jsfiddle.net/4mkuty3p/90
试试这个：jsfiddle.net/4mkuty3p/156你已经改变了元素的id，你在js中尝试使用不同的id..