javascript - LocalStorage Challenge -
i have gone through reading posts as , got of working, except last part. trying have set of events calendar stored in localstorage, need able retrieve them via button 'saved events'. right button retrieves 1 event , need , events in storage. made fiddle: jsfiddle.
any or feedback appreciated, here code:
<!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; } { 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 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 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 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 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, browser not support web storage..."; } }); $("#buttn").click(function () { var storaged = localstorage.length; for( var i=0; i<storaged; i++ ) { console.log("your stored events " + localstorage[i]); var key = localstorage.key(i); var value = localstorage[key]; $("#result").html(key + value); //$("#result").html(localstorage[i]); } //console.log("stored schedule " + alleventers); }); }); </script> </body> </html>
ok, looks there problems way accessing localstorage.
localstorage object, not array, have access differently. have @ updated fiddle: http://jsfiddle.net/s1dcps6q/3/
and updated javascript:
$(document).ready(function() { $(".selctor").click(function() { var = $(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, browser not support web storage..."; } }); $("#buttn").click(function() { //var alleventers; var storaged = object.keys(localstorage).length; // count number of properties of object (var = 0; < storaged; i++) { $("#result").append(localstorage["schedule " + i]); // add div, not replace content } }); });
Comments
Post a Comment