javascript - 如何将本地存储应用到我的待办事项列表？

Question

我正在做一些 javascript/jquery 练习。我的项目看起来像“trello”，但更加柔和和简单。

当我编写一些列表/计划进行输入时，javscript 会动态添加“卡片”，但是如果我刷新页面/chrome，所有的东西都消失了或丢失了。

所以我想在我的项目中应用 localstorage。感谢所有帮助...

这是我的 todolist .

function showTime() {
  var date = new Date();
  var h = date.getHours();
  var m = date.getMinutes();
  var s = date.getSeconds();

  if (h < 10) {
    h = "0" + h;
  }

  if (m < 10) {
    m = "0" + m;
  }

  if (s < 10) {
    s = "0" + s;
  }

  var time = h + ":" + m + "." + s;
  document.getElementById('hours').innerText = time;
  document.getElementById('hours').textContent = time;
}

showTime();
setInterval(showTime, 1000)

let generateComment = comment => ` <div class="comment"><h5>${comment}</h5></div> `

$('#button').keypress(function(e) {
  if (e.keyCode === 13 && !e.shiftKey) {
    e.preventDefault();

    var comment = $('#button').val()
    $(this).val('');
    var text = $(generateComment(comment));
  }

  $('.yorum').append(text)
});

body {
  background-color: #2c3e50;
}

.container {
  display: flex;
  /* establish flex container */
  flex-direction: column;
  /* make main axis vertical */
  justify-content: center;
  /* center items vertically, in this case */
  align-items: center;
  /* center items horizontally, in this case */
  height: 300px;
}

.box {
  width: 200px;
  height: 100px;
  border: 1px solid #69034c;
  border-radius: 8px;
  background-color: #b9f6ca;
  box-shadow: 0 19px 38px rgba(24, 1, 1, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
  font-family: "Lato", sans-serif;
  color: #020701;
  display: flex;
  justify-content: center;
  align-items: center;
}

input {
  padding: 10px;
  width: 300px;
  font-size: 14px;
  margin: 50px auto;
  display: block;
  border-radius: 10px;
  border: none;
  outline: none;
  border: 6px solid #556677;
}

.yorum {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.comment {
  width: 300px;
  height: 100px;
  background-color: #f5f5ba;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Lato", sans-serif;
  cursor: pointer;
  border-radius: 4px;
  padding: 16px;
  margin: 5px;
}


/*# sourceMappingURL=main.css.map */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="box">
    <h1 id="hours"></h1>
  </div>

  <div class="text">
    <input type="text" id="button"></textarea>
  </div>
</div>
<div class="yorum"></div>

Answer 1

要完成这项工作，您需要在 localStorage 中存储一个数组，您可以在需要时将其push() 到该数组。由于 localStorage 只能包含字符串，因此您需要在访问和保存之前对从中检索到的数据进行序列化/反序列化。为此，您可以使用 JSON.parse 和 JSON.stringify。

存储数据后，您只需添加一些逻辑，在页面加载时检查 localStorage，然后在 UI 中显示数组中的所有项目，如下所示:

function showTime() {
  var date = new Date();
  var h = ('0' + date.getHours()).slice(-2);
  var m = ('0' + date.getMinutes()).slice(-2);
  var s = ('0' + date.getSeconds()).slice(-2);

  var time = h + ":" + m + "." + s;
  $('#hours').text(time);
}

showTime();
setInterval(showTime, 1000)

$('#button').keypress(function(e) {
  if (e.keyCode === 13 && !e.shiftKey) {
    e.preventDefault();
    var comment = $('#button').val();    
    var store = JSON.parse(localStorage.getItem('todo')) || [];
    store.push(comment);
    localStorage.setItem('todo', JSON.stringify(store));

    $(this).val('');
    displayComment(comment);
  }
});

function displayComment(comment) {
  var html = $(`<div class="comment"><h5>${comment}</h5></div>`);
  $('.yorum').append(html);
}

var store = JSON.parse(localStorage.getItem('todo')) || [];
store.forEach(displayComment);

Updated Codepen

请注意，我还对您的逻辑进行了一些其他优化以使其更加简洁，例如使用 jQuery DOM 选择器以及使用 slice() 强制时间值具有前导零。