Question

我正在尝试创建一个基本的待办应用程序，我可以在其中简单地添加，完成和删除任务。

我正在运行核心功能，但是我想弄清楚如何在刷新页面后保存用户添加到的任务-因为如果用户看不到创建的应用程序，该应用程序将变得毫无用处任务刷新页面后。

我是前端开发的新手，所以我愿意接受所有意见并为大家提供帮助。

非常感谢！

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

Answer 1

保存用户创建的内容的最常见方法是，将后端与数据库一起设置，然后将带有HTTP发布请求的数据从前端发送到后端。如果您想以最简单的方式获得理想的效果，可以使用注释中提到的localStorage功能。 MDN文档可以比我更好地解释它：

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Javascript-如何保存刷新后添加到<ul>的<li>元素？

1 个答案: