Question

我已尽可能多地阅读帖子，并且除了最后一部分外，其中大部分工作都已完成。我正在尝试从localStorage中存储的日历中获取一组事件，然后需要能够通过按钮“保存的事件”来检索它们。现在，按钮只检索一个事件，我需要获取存储中的所有事件。我也做了一个小提琴：JSFiddle。

任何帮助或反馈将不胜感激，这是代码：

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

Answer 1

好的，看起来您访问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
        }
    });

});

Answer 2

我更新了小提琴：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");
    });
});

LocalStorage挑战赛

2 个答案: