LocalStorage挑战
LocalStorage挑战
提问于 2014-12-05 21:59:45
我已经阅读了尽可能多的帖子，除了最后一部分之外，我已经完成了大部分的工作。我试图让一组事件从日历中存储在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>回答 2
Stack Overflow用户
回答已采纳
发布于 2014-12-05 22:29:42
好的，看起来您访问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
}
});
});Stack Overflow用户
发布于 2014-12-10 07:54: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");
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27325349
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号