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/