任何更好的方法來設置和從LocalStorage獲取？

我想找出一個更好的方式來做我的代碼下面做的.. 它所做的是它保存localstorage中的時間戳，以知道該鏈接最後點擊的時間，然後它顯示時間運行出。但是，如果我想添加更多鏈接，它會很複製粘貼... 有人可以幫助我如何循環通過「保存和加載」腳本？也許可以在鏈接中添加分鐘數而不是在腳本中？任何更好的方法來設置和從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"; 
}

來源

2015-12-15 user3771408

我想你可以做到這一點 -

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

來源

2015-12-15 07:27:29 hkasera

不能在問題發現jQuery的標籤。 – 0x860111

既然沒有提到，我用jquery :)同樣的邏輯也可以爲javascript添加。優化保持不變。 – hkasera

您可以使用避免使用不同參數的一個函數的多個函數。在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

來源

2015-12-15 07:32:47 Rayon

哇，超級快速的答案！但是這段代碼會同時重置所有4個鏈接，對吧？ – user3771408

這正是我一直在尋找的，但對不起，如果我很愚蠢，現在已經清醒了一段時間..但我在哪裏設置單獨的時間讓鏈接再次出現？在我的例子中，鏈接1是30分鐘，鏈接2 180分鐘等等...我可以在鏈接中設置這些值嗎？ – user3771408

好吧，我會盡力做到這一點，在編程方面我很漂亮，你會介意寫一個例子或小提琴嗎？ – user3771408

任何更好的方法來設置和從LocalStorage獲取？

回答

相關問題