如何将本地存储应用于我的待办事项

Question

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

当我写一些列表/计划输入时，javscript会动态添加"card"，但如果我刷新页面/chrome，所有东西都消失或丢失了。

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

这是我的学步车。

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);

更新的Codepen

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

Answer 2

保存卡数据：

localStorage.setItem("cardID", yourCardData);

删除卡数据：

localStorage.removeItem("cardID");

获取保存的卡数据：

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

但如果你想存储一系列数据卡，我认为解决方案可能是：

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

当var卡被更改时使用：

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

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