Javascript 如何将本地存储应用于todolist？

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

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

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

这是我的名片

函数showTime（）{
变量日期=新日期（）；
var h=date.getHours（）；
var m=date.getMinutes（）；
var s=date.getSeconds（）；
if（h<10）{
h=“0”+h；
}
如果（m<10）{
m=“0”+m；
}
如果（s<10）{
s=“0”+s；
}
变量时间=h+“：“+m+”+s；
document.getElementById（'hours'）。innerText=时间；
document.getElementById（'hours'）。textContent=时间；
}
showTime（）；
设置间隔（显示时间，1000）
让generateComment=comment=>`${comment}`
$（“#按钮”）。按键（功能（e）{
如果（e.keyCode===13&&！e.shiftKey）{
e、 预防默认值（）；
var comment=$（“#按钮”）.val（）
$（this.val（“”）；
变量文本=$（生成注释（注释））；
}
$（'.yorum'）。追加（文本）
});
正文{
背景色：#2c3e50；
}
.集装箱{
显示器：flex；
/*建立flex容器*/
弯曲方向：立柱；
/*使主轴垂直*/
证明内容：中心；
/*在本例中，将项目垂直居中*/
对齐项目：居中；
/*在本例中，将项目水平居中*/
高度：300px；
}
.盒子{
宽度：200px；
高度：100px；
边框：1px实心#69034c；
边界半径：8px；
背景色：#b9f6ca；
盒影：019px38pxRGBA（24,1,1,0.3），015px12pxRGBA（0,0,0,0.22）；
字体系列：“Lato”，无衬线；
颜色：#020701；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
输入{
填充：10px；
宽度：300px；
字体大小：14px；
保证金：50px自动；
显示：块；
边界半径：10px；
边界：无；
大纲：无；
边框：6px实心#556677；
}
约鲁姆先生{
显示器：flex；
证明内容：中心；
对齐项目：居中；
柔性包装：包装；
}
.评论{
宽度：300px；
高度：100px；
背景色：#F5BA；
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体系列：“Lato”，无衬线；
光标：指针；
边界半径：4px；
填充：16px；
保证金：5px；
}
/*#sourceMappingURL=main.css.map*/
要实现这一点，您需要在localStorage中存储一个数组，您可以在需要时将该数组推送到。由于localStorage只能包含字符串，因此在访问和保存之前，需要对从中检索的数据进行序列化/反序列化。为此，您可以使用
JSON.parse
和
JSON.stringify

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

函数showTime（）{
变量日期=新日期（）；
var h=（'0'+date.getHours（））.slice（-2）；
var m=（'0'+date.getMinutes（））.slice（-2）；
var s=（'0'+date.getSeconds（））.slice（-2）；
变量时间=h+“：“+m+”+s；
$（'小时'）。文本（时间）；
}
showTime（）；
设置间隔（显示时间，1000）
$（“#按钮”）。按键（功能（e）{
如果（e.keyCode===13&&！e.shiftKey）{
e、 预防默认值（）；
var comment=$（“#按钮”）.val（）；
var store=JSON.parse（localStorage.getItem（'todo'））| |[]；
store.push（评论）；
setItem（'todo'，JSON.stringify（store））；
$（this.val（“”）；
显示评论（comment）；
}
});
函数displayComment（注释）{
var html=$（`${comment}`）；
$（'.yorum'）.append（html）；
}
var store=JSON.parse（localStorage.getItem（'todo'））| |[]；
store.forEach（displayComment）；


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

localStorage.setItem("cardID", yourCardData);

localStorage.removeItem("cardID");

删除卡数据：

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的更多信息：
您是最佳人选！LocalStroge对我来说真的很难理解。谢谢你的努力。：）没问题，很乐意帮助
localStorage.getItem（“cards”| |“[]）
将无法正常工作。有关正确的语法，请参见我的答案。另外，请不要将W3Schools用作参考。他们的文章经常过时，有时甚至完全错了。MDN更加全面和准确：谢谢Rory McCrossan。编辑：
JSON.parse（localStorage.getItem（“cards”）| |[]