Question

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

当我编写一些要输入的列表/计划时，javscript动态添加“卡”，但是如果我刷新页面/镶边，所有东西都不见了。

所以我想在我的项目中应用本地存储。感谢所有帮助...

这是我的todolist。

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
              <th>Name</th>
              <th>Phone</th>
              <th>Email</th>
              <th>Course</th>
              <th>Status</th>
            </tr>
        </thead>
    </table>

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

Answer 1

要执行此操作，您需要在本地存储中存储一个数组，您可以在需要时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()来强制时间值具有前导零。

Answer 2

保存卡数据：

localStorage.setItem("cardID", yourCardData);

删除卡数据：

localStorage.removeItem("cardID");

获取保存的卡数据：

var Card = localStorage.getItem("CardID");

但是，如果您要存储一组数据卡，我认为解决方案可能是：

var cards = JSON.parse(localStorage.getItem("cards")) || []

更换无功卡后，请使用：

localStorage.setItem("cards", JSON.stringify(cards));

您可以在此处阅读有关localStorage的更多信息：Window localStorage Property - w3schools.com

如何将本地存储应用于待办事项列表？

2 个答案: