Javascript-如何保存<；李>；添加到<；ul>；刷新后>；？_Javascript_Jquery_Html_Css

Javascript-如何保存<；李>；添加到<；ul>；刷新后>；？

javascript jquery html css

Javascript-如何保存<；李>；添加到<；ul>；刷新后>；？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试创建一个基本的待办应用程序，在这里我可以简单地添加、完成和删除任务我的核心功能正在发挥作用，但我正试图找出如何保存用户在刷新页面后添加到的任务，因为如果用户在刷新页面后看不到他们创建的任务，应用程序将非常无用我对前端开发还不熟悉，所以我愿意听取所有意见，并帮助你们提供帮助非常感谢 HTML: 待办事项清单 JS: //刷新后保存待办事项列表 //单击时，通过线连接到_Do's $（“ul”）。单击（“click”，“li”，function（）{ $（此）.toggleC

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

我的核心功能正在发挥作用，但我正试图找出如何保存用户在刷新页面后添加到的任务，因为如果用户在刷新页面后看不到他们创建的任务，应用程序将非常无用

我对前端开发还不熟悉，所以我愿意听取所有意见，并帮助你们提供帮助

非常感谢

HTML:


待办事项清单

JS:

//刷新后保存待办事项列表
//单击时，通过线连接到_Do's
$（“ul”）。单击（“click”，“li”，function（）{
$（此）.toggleClass（“已完成”）；
});
//删除按钮从列表中删除任务
$（“ul”）。在（“单击”，“跨距”，功能（事件）{
//使用.parent（）包含删除后淡出的整个元素
$（this.parent（）.fadeOut（function（））{
//将从页面中删除该元素，而不是将其隐藏
$（this.remove（）；
});
//停止在父元素（即
元素）中发生单击事件
event.stopPropagation（）；
});
//从文本输入添加新的todo
$（“输入[type='text']”）。按键（函数（事件）{
//将事件按键指定给“回车”键（其值为13）
if（event.which==13）{
//从输入字段抓取要添加的新todo
var newTodo=$（this.val（）；
//清除文本输入
$（此）.val（“”）；
//创建一个新的
以添加到当前待办事项列表的末尾
$（“ul”）。追加（“
”+newTodo+”）
}
});

CSS:

正文{
字体系列：蒙特塞拉特；
背景：-webkit线性梯度（向左，#24c6dc，#514a9d）；
背景：线性梯度（向左，#24c6dc，#514a9d）；
字体重量：较轻；
}
h1{
文本转换：大写；
保证金：0；
填充：10px 20px；
字体大小：150%；
字体系列：蒙特塞拉特；
字体大小：300；
}
保险商实验室{
保证金：0；
填充：0；
列表样式：无；
}
李{
利润率：1.5%；
高度：40px；
线高：40px；
背景色：#C06CB4；
}
/*将每隔*/
李：第n个孩子（2n）{
背景色：#6C5B7B；
}
李：悬停跨度{
宽度：40px；
不透明度：1；
}
输入{
利润率：10px自动；
字号：18px；
字体系列：蒙特塞拉特；
字体重量：较轻；
背景色：#585a5e；
颜色：#dae0e5；
宽度：100%；
填充：13px 13px 13px 20px；
框大小：边框框；
框大小：-webkit边框框；
边框样式：无；
}
/*单击时编辑突出显示输入字段的边框*/
输入：焦点{
边框：3px实心#F67280；
大纲：无；
}
输入：：占位符{
颜色：#dae0e5；
}
跨度{
背景色：#585a5e；
高度：40px；
右边距：20px；
文本对齐：居中；
宽度：0；
显示：内联块；
过渡：0.35s线性；
不透明度：0；
}
.完成{
颜色：灰色；
文字装饰：线条贯通；
}
.hr_风格{
边界：0；
高度：1px；
背景图像：线性渐变（向右，rgba（0,0,0,0），rgba（248,177,149,1），rgba（0,0,0,0））；
}
#容器{
颜色：#dae0e5；
宽度：40%；
利润率：5%自动；
填充：10px 20px；
背景色：#6C5B7B；
盒影：10px 5px 5px黑色；
边界半径：30px；
字母间距：0.18em；
}

Codepen链接：

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

使用

localStorage

。浏览器将把数据保存在用户的磁盘上。

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

// 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>")
    }
});

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