LocalStorage Challenge

나는 마지막 부분을 제외하고는 이미 내가 할 수있는만큼 게시물을 읽었으며 대부분이 작업을했습니다. 나는 localStorage에 저장된 달력에서 일련의 이벤트를 가져 오려고 시도하고 있으며, '저장된 이벤트'버튼을 통해 이벤트를 검색 할 수 있어야합니다. 지금 버튼은 하나의 이벤트 만 검색하므로 저장소의 모든 이벤트를 가져와야합니다. 나는 또한 바이올린을 만들었다 : 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

안녕하세요 로버트, 제가 링크를 만들었다 고 생각합니다. html을 제거 했어야합니다. 감사합니다. – roob

OK :

어떤 도움이나 의견

, 여기 주시면 감사하겠습니다 코드입니다.

localStorage는 배열이 아닌 객체이므로 다른 방식으로 액세스해야합니다. http://jsfiddle.net/s1dcps6q/3/

그리고 업데이트 된 자바 스크립트 : 나는 바이올린 업데이트 한

$(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"에 따라 정렬되기 때문에 시퀀스에서 벗어난 rel을 무시합니다. rel 1,2,4가 저장 장치에 저장되어 있다고하자.이 버튼은 1과 2 만 호출한다. 나는이 작업을 수행해야하므로 아무런 수정이나 제안을 해주지 않을 것이다. – roob

: 업데이트 된 바이올린 한 번 봐 가지고 여기

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

답변

관련 문제