LocalStorage Challenge

我已經儘可能多地閱讀文章，並且除了最後一部分之外，還有大部分工作。我試圖從存儲在localStorage中的日曆中獲取一組事件，然後需要能夠通過按鈕「Saved Events」檢索它們。現在按鈕只檢索一個事件，我需要獲取存儲中的所有事件。我也做了一個小提琴：JSFiddle。LocalStorage Challenge

任何幫助或意見，將不勝感激，這裏是代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<style> 
.eventer { 
    background-color:#9CB2B7; 
    padding: 15px; width: 150px; 
    height: auto; margin:0; color: #fff; 
    letter-spacing:0.7px; 
} 
.selctor { 
    background-color: #A0AABA; 
    width: 180px; 
} 
a { 
    display: block; 
    text-decoration: none; 
color: #fff; 
    letter-spacing: 0.7px; 
    text-align: center; 
    font-weight: normal; 
    padding: 5px; 
    } 
#result{ height:200px; outline:dotted 2px red; padding-bottom:150px; } 
</style> 
</head> 
<body> 
<div> 
    <div class="eventer" rel="0"><strong>Event 1 Saturday</strong><br /> 
    yakedi yak</div> 
    <p class="selctor" rel="0"><a href="#">Add to Schedule</a></p> 
    </div> 
    <br /><br /> 

<div> 
    <div class="eventer" rel="1"><strong>Event 1 Saturday</strong><br /> 
    more yakedi yak</div> 
    <p class="selctor" rel="1"><a href="#">Add to Schedule</a></p> 
    </div> 
    <br /><br /> 

<div> 
    <div class="eventer" rel="2"><strong>Event 3 Sunday</strong> 
    <p>new yakedi yak</p></div> 
    <p class="selctor" rel="2"><a href="#">Add to Schedule</a></p> 
    </div> 
    <br /><br /> 

<div> 
    <div class="eventer" rel="3"><strong>Event 4 Sunday</strong> 
    <p>blah blah dooodah</p></div> 
    <p class="selctor" rel="3"><a href="#">Add to Schedule</a></p> 
    </div> 
    <br /> 

    <input type="submit" id="buttn" value="Saved Events"><br /><br /> 

    <div>Selected Events are:<br /> 
    <div id="result"> 
    </div>  
     </div> 

<script src="jquery-1.9.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 

    $(".selctor").click(function() { 
     var i=$(this).attr("rel"); 
     console.log(i); 
     var eventsArray=document.getElementsByClassName("eventer"); 
     eventSelctd=(eventsArray[i]).outerHTML; 
     console.log("selected event is" + " " + eventSelctd); 

     if (typeof(Storage) != "undefined") { 
      localStorage.setItem("schedule "+ i, eventSelctd); 
     } 
      else { 
      document.getElementById("#result").innerHTML = "Sorry, your browser does not support Web Storage..."; 
      } 

}); 
    $("#buttn").click(function() { 
    var storaged = localStorage.length; 

    for(var i=0; i<storaged; i++) 
    { 
    console.log("Your stored events are " + localStorage[i]); 
    var key = localStorage.key(i); 
    var value = localStorage[key]; 
    $("#result").html(key + value); 
    //$("#result").html(localStorage[i]); 
    } 
    //console.log("stored schedule is " + allEventers); 
    }); 

}); 


</script> 
</body> 
</html>

來源

2014-12-05 roob

你說你做了小提琴？ ...我們有可能看到這個機會嗎？ – swatkins 2014-12-05 22:07:24

嗨羅伯特，我以爲我做了一個鏈接，它必須剝去html，這裏是：謝謝 – roob 2014-12-05 22:09:11

OK，它看起來像有一些問題與大家進行了訪問的localStorage方式。

localStorage是一個對象，而不是一個數組，因此您必須以不同的方式訪問它。看看更新的小提琴：http://jsfiddle.net/s1dcps6q/3/

和更新後的JavaScript：

$(document).ready(function() { 

    $(".selctor").click(function() { 
     var i = $(this).attr("rel"); 
     var eventsArray = document.getElementsByClassName("eventer"); 
     eventSelctd = (eventsArray[i]).outerHTML; 

     if (typeof(Storage) != "undefined") { 
      localStorage.setItem("schedule " + i, eventSelctd); 
     } else { 
      document.getElementById("#result").innerHTML = "Sorry, your browser does not support Web Storage..."; 
     } 

    }); 
    $("#buttn").click(function() { 

     //var allEventers; 
     var storaged = Object.keys(localStorage).length; // count the number of properties of the object 

     for (var i = 0; i < storaged; i++) { 
      $("#result").append(localStorage["schedule " + i]); // add to the div, not replace the content 
     } 
    }); 

});

來源

2014-12-05 22:29:42 swatkins

經過更多的測試後，我看到它在做什麼。數據存儲在localStorage中就好，調用按鈕只會調用連續的數據。因爲它按照「rel」進行排序，所以它忽略了不符合順序的rels。可以說rel 1,2,4存儲在存儲器中，該按鈕只回調1和2.任何修復或建議將不勝感激，因爲我需要完成這項工作。 – roob 2014-12-08 20:18:30

我已經更新了小提琴：http://jsfiddle.net/s1dcps6q/4/

這裏是代碼，這個做什麼，我也想，想與任何遇到此挑戰的人分享。我對上面的swatkins代碼進行了修改：

$(document).ready(function(){ 

    $(".selctor").click(function() { 
     var i=$(this).attr("rel"); 
     console.log(i); 
     var eventsArray=document.getElementsByClassName("eventer"); 
     eventSelctd=(eventsArray[i]).outerHTML; 
     console.log("selected event is" + " " + eventSelctd); 

     if (typeof(Storage) != "undefined") { 
      localStorage.setItem("schedule "+ i, eventSelctd); 
      //console.log("local Storage should read " + eventSelctd); 
     } 
      else { 
      document.getElementById("#result").innerHTML = "Sorry, your browser does not support Web Storage..."; 
      } 

}); 
    $("#buttn").click(function() { 
    var storaged = Object.keys(localStorage).length; 
    console.log("test: " + storaged); 

    for(var i=0; i<storageLength; i++) 
    { 
    var key = localStorage.key(i); 
    var value = localStorage[key]; 
    $("#result").append(value); 
    } 
    }); 
    $("#buttn2").click(function(){ 
    localStorage.clear(); 
    $("#result").html(''); 
    console.log("Storage is cleared"); 
    }); 
});

來源

2014-12-10 07:54:30 roob

LocalStorage Challenge

回答

相關問題