Question

......但我还没弄清楚如何让它发挥作用。这是我对javascript和html的代码

我已阅读有关本地存储的文章，但不知道如何正确应用它，或者我的示例是否可行。

// javascript

$("ul").on("click", "li", function(){
    $(this).toggleClass("completed");
});

$("ul").on("click", "span", function(event){
        $(this).parent().fadeOut(1000, function(){
            $(this).remove();
        });
        event.stopPropagation();
});

$("input[type='text']").on("keypress", function(event){
    if(event.which === 13){
        var todoText = $(this).val();
        $(this).val("");
        $("ul").append("<li><span><i class='fa fa-trash-o' aria-hidden='true'></i></span> " + todoText + "</li>");
    }   
});

localStorage.setItem('newTodo', 'ul');
localStorage.getItem('newTodo');

$(".fa-plus").on("click", function(){
    $("input[type='text']").fadeToggle(400, "swing");
});

// HTML

<!DOCTYPE html>
<html>
<head>
    <title>Todo List</title>
    <link rel="stylesheet" type="text/css" href="assets/css/todos.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script type="text/javascript" src="assets/js/lib/jquery-3.2.1.min.js"></script>
</head>
<body>

<div id="container">
    <h1>To-Do List<i class="fa fa-plus" aria-hidden="true"></i></h1>

    <input type="text" placeholder="Add New Todo">

    <ul>
        <li><span><i class="fa fa-trash-o" aria-hidden="true"></i></span> html course</li>
        <li><span><i class="fa fa-trash-o" aria-hidden="true"></i></span> css course</li>
        <li><span><i class="fa fa-trash-o" aria-hidden="true"></i></span> javascript course</li>
        <li><span><i class="fa fa-trash-o" aria-hidden="true"></i></span> jQuery course</li>
    </ul>
</div>

<script type="text/javascript" src="assets/js/todos.js"></script>
</body>
</html>

我有一个Todo列表应用程序非常基本的javascript，我想在浏览器的本地存储

0 个答案: