的localStorage的getItem不工作以及

Question

所以我试图让形式冲浪者的印象则出现在笔记的形式和文字记录了他记录的一切都会被保存在localStorage的：

var tasks = []; 
 

 
document.querySelector("#add").addEventListener("click", function() { 
 

 
    var missionName = document.querySelector("input[name=mission]").value; 
 
    var missionDate = document.querySelector("input[name=date]").value; 
 
    var missionDesc = document.querySelector("textarea[name=description]").value; 
 
    document.querySelector("ul ").innerHTML += "<li><div class='note'><br><strong>" + missionName + "</strong>" + "<br>" + missionDate + "<br>" + missionDesc + " </div> </li>"; 
 

 
    tasks.push({ 
 
    missionName: missionName, 
 
    missionDate: missionDate, 
 
    missionDesc: missionDesc 
 
    }); 
 

 
    var JSONtasks = JSON.stringify(tasks); 
 
    localStorage.setItem("tasks", JSONtasks); 
 

 
    tasks = localStorage.getItem("tasks"); 
 
    tasks = JSON.parse(tasks); 
 

 
});

body { 
 
    background: url(images/bg2.jpg); 
 
    margin: 0 auto; 
 
    padding: 0; 
 
} 
 
#warper { 
 
    border-bottom: 5px solid black; 
 
} 
 
#logo img { 
 
    margin-left: 30%; 
 
    margin-right: 30%; 
 
    margin-top: 4%; 
 
    margin-bottom: 4%; 
 
    width: 35%; 
 
} 
 
#board { 
 
    background: url(images/paper.png) no-repeat; 
 
    margin: 0 auto; 
 
    margin-bottom: 40px; 
 
    width: 700px; 
 
    min-height: 153px; 
 
    padding: 50px 60px; 
 
} 
 
#board #form { 
 
    margin-top: -20px; 
 
} 
 
#board label { 
 
    font-size: 0.8em; 
 
    font-weight: bolder; 
 
    font-family: arial; 
 
    text-transform: capitalize; 
 
} 
 
#board textarea, 
 
input { 
 
    margin-bottom: 0px; 
 
    color: gray; 
 
} 
 
#taskboard { 
 
    padding-top: 50px; 
 
    background-color: rgba(43, 44, 44, 0.4); 
 
    background: rgba(43, 44, 44, 0.4); 
 
    min-height: 1000px; 
 
    position: relative; 
 
} 
 
ul { 
 
    position: absolute; 
 
    z-index: 3; 
 
    top: 20px; 
 
    left: 100px; 
 
    list-style: none; 
 
} 
 
ul li { 
 
    display: inline-block; 
 
    background: red; 
 
    width: 249px; 
 
    min-height: 327px; 
 
    padding-left: 20px; 
 
    padding-bottom: 30px; 
 
} 
 
.note { 
 
    padding: 50px; 
 
}

<div id="warper"> 
 

 
    <div id="logo"> 
 

 
    <img src="images/title.png" alt="task board" /> 
 

 
    <div id="board"> 
 

 
     <div id="form"> 
 

 
     <label>Name your mission:</label> 
 
     <input type="text" name="mission" /> 
 
     <label>Dead line:</label> 
 
     <input type="date" name="date" /> 
 
     </br> 
 
     </br> 
 
     <label>Describe your mission:</label> 
 
     </br> 
 
     <textarea name="description" cols="75"></textarea> 
 

 
     <input type="button" value="add" id="add" /> 
 

 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div> 
 

 
<div id="taskboard"> 
 

 

 

 

 
    <ul> 
 

 

 

 

 
    </ul> 
 

 

 
</div>

显示不看，因为我的桌面上的图片的这么好，所以我做了一个红色的背景，只是让你了解我的想法。 我希望冲浪者录制的内容出现在最后会以红色的形式保存在刷新后会保留下来。

我强烈地指出localstorage.setItem工作正常，并保留在那里，我检查出来。 这个问题是getItem拒绝让我刷新页面后写的笔记。

我希望这个问题能够解决，一直很绝望。

Answer 1

你只需要在加载页面，像这样的显示是在localStorage的任务：

var tasks = []; 
 
//Here you load the saved tasks 
 
if(localStorage.getItem("tasks")) { 
 
    tasks = JSON.parse(localStorage.getItem("tasks")); 
 
    for(var i=0; i<tasks.length; i++) { 
 
     document.querySelector("ul ").innerHTML += "<li><div class='note'><br><strong>" + tasks[i].missionName + "</strong>" + "<br>" + tasks[i].missionDate + "<br>" + tasks[i].missionDesc + " </div> </li>"; 
 
    } 
 
} 
 

 
document.querySelector("#add").addEventListener("click", function() { 
 

 
    var missionName = document.querySelector("input[name=mission]").value; 
 
    var missionDate = document.querySelector("input[name=date]").value; 
 
    var missionDesc = document.querySelector("textarea[name=description]").value; 
 
    document.querySelector("ul ").innerHTML += "<li><div class='note'><br><strong>" + missionName + "</strong>" + "<br>" + missionDate + "<br>" + missionDesc + " </div> </li>"; 
 

 
    tasks.push({ 
 
    missionName: missionName, 
 
    missionDate: missionDate, 
 
    missionDesc: missionDesc 
 
    }); 
 

 
    var JSONtasks = JSON.stringify(tasks); 
 
    localStorage.setItem("tasks", JSONtasks); 
 

 
    tasks = localStorage.getItem("tasks"); 
 
    tasks = JSON.parse(tasks); 
 

 
});

body { 
 
    background: url(images/bg2.jpg); 
 
    margin: 0 auto; 
 
    padding: 0; 
 
} 
 
#warper { 
 
    border-bottom: 5px solid black; 
 
} 
 
#logo img { 
 
    margin-left: 30%; 
 
    margin-right: 30%; 
 
    margin-top: 4%; 
 
    margin-bottom: 4%; 
 
    width: 35%; 
 
} 
 
#board { 
 
    background: url(images/paper.png) no-repeat; 
 
    margin: 0 auto; 
 
    margin-bottom: 40px; 
 
    width: 700px; 
 
    min-height: 153px; 
 
    padding: 50px 60px; 
 
} 
 
#board #form { 
 
    margin-top: -20px; 
 
} 
 
#board label { 
 
    font-size: 0.8em; 
 
    font-weight: bolder; 
 
    font-family: arial; 
 
    text-transform: capitalize; 
 
} 
 
#board textarea, 
 
input { 
 
    margin-bottom: 0px; 
 
    color: gray; 
 
} 
 
#taskboard { 
 
    padding-top: 50px; 
 
    background-color: rgba(43, 44, 44, 0.4); 
 
    background: rgba(43, 44, 44, 0.4); 
 
    min-height: 1000px; 
 
    position: relative; 
 
} 
 
ul { 
 
    position: absolute; 
 
    z-index: 3; 
 
    top: 20px; 
 
    left: 100px; 
 
    list-style: none; 
 
} 
 
ul li { 
 
    display: inline-block; 
 
    background: red; 
 
    width: 249px; 
 
    min-height: 327px; 
 
    padding-left: 20px; 
 
    padding-bottom: 30px; 
 
} 
 
.note { 
 
    padding: 50px; 
 
}

<div id="warper"> 
 

 
    <div id="logo"> 
 

 
    <img src="images/title.png" alt="task board" /> 
 

 
    <div id="board"> 
 

 
     <div id="form"> 
 

 
     <label>Name your mission:</label> 
 
     <input type="text" name="mission" /> 
 
     <label>Dead line:</label> 
 
     <input type="date" name="date" /> 
 
     </br> 
 
     </br> 
 
     <label>Describe your mission:</label> 
 
     </br> 
 
     <textarea name="description" cols="75"></textarea> 
 

 
     <input type="button" value="add" id="add" /> 
 

 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div> 
 

 
<div id="taskboard"> 
 

 

 

 

 
    <ul> 
 

 

 

 

 
    </ul> 
 

 

 
</div>

您可以测试结果在此的jsfiddle：http://jsfiddle.net/815yx7jk/