我正在尝试创建一个基本的待办事项应用程序，我可以在其中简单地添加、完成和删除任务。
我的核心功能正在运行，但我正在尝试弄清楚如何在刷新页面后保存用户添加到的任务 - 因为如果用户看不到他们创建的应用程序将毫无用处刷新页面后的任务。
我是前端开发的新手，所以我愿意接受所有的意见，并愿意为你们提供帮助。
非常感谢!
HTML:
<body>
<div id="container">
<h1>To-Do List <i class="far fa-check-square"></i></h1>
<hr class="hr_style">
<input type="text" placeholder="Enter a new todo">
<ul></ul>
</div>
<script type="text/javascript" src="assets/js/script.js"></script>
</body>
JS:
// Save todos list after refresh
// Line-through To_Do's when clicked on
$("ul").on("click", "li", function(){
$(this).toggleClass("completed");
});
// Delete button to remove task from list
$("ul").on("click", "span", function(event){
// Use .parent() to include the whole <li> element to fade out once deleted
$(this).parent().fadeOut(function() {
// Will delete the element from the page instead of hiding it
$(this).remove();
});
// Stops click event from occuring in parent elements i.e. the <li> element
event.stopPropagation();
});
// Adding a new todo from text input
$("input[type='text']").keypress(function(event) {
// Assigning the event keypress to the "Enter" key (which has a value of 13)
if (event.which === 13) {
// Grabbing the new todo to be added from the input field
var newTodo = $(this).val();
// Clears text input
$(this).val("");
// Creates a new <li> to add to the end of list of current todos
$("ul").append("<li><span><i class='far fa-trash-alt'></i></span> " + newTodo + "</li>")
}
});
CSS:
body {
font-family: Montserrat;
background: -webkit-linear-gradient(to left, #24c6dc, #514a9d);
background: linear-gradient(to left, #24c6dc, #514a9d);
font-weight: lighter;
}
h1 {
text-transform: uppercase;
margin: 0;
padding: 10px 20px;
font-size: 150%;
font-family: Montserrat;
font-weight: 300;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin: 1.5% auto;
height: 40px;
line-height: 40px;
background-color: #C06CB4;
}
/* Will style every other <li> */
li:nth-child(2n) {
background-color: #6C5B7B;
}
li:hover span {
width: 40px;
opacity: 1;
}
input {
margin: 10px auto;
font-size: 18px;
font-family: Montserrat;
font-weight: lighter;
background-color: #585a5e;
color: #dae0e5;
width: 100%;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
box-sizing: -webkit-border-box;
border-style: none;
}
/* Editing highlight border of the input field when clicked */
input:focus {
border: 3px solid #F67280;
outline: none;
}
input::placeholder {
color: #dae0e5;
}
span {
background-color: #585a5e;
height: 40px;
margin-right: 20px;
text-align: center;
width: 0;
display: inline-block;
transition: 0.35s linear;
opacity: 0;
}
.completed {
color: grey;
text-decoration: line-through;
}
.hr_style {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(248, 177, 149, 1), rgba(0, 0, 0, 0));
}
#container {
color: #dae0e5;
width: 40%;
margin: 5% auto;
padding: 10px 20px;
background-color: #6C5B7B;
box-shadow: 10px 5px 5px black;
border-radius: 30px;
letter-spacing: 0.18em;
}
Codepen 链接:https://codepen.io/munjyong/pen/gdYPKV
最佳答案
保存用户创建的内容的最常见方法是设置后端和数据库，然后使用 HTTP Post 请求将数据从前端发送到后端。如果您想以最简单的方式获得所需的效果，您可以使用评论中提到的 localStorage 功能。 MDN 文档可以比我更好地解释它:
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
关于Javascript - 如何保存刷新后添加到 <ul> 的 <li> 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51911950/