的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/