Question

我写了一个todo应用程序，将todo数据存储在html5存储中。刷新页面时，不显示存储的数据。实时网站here。请在下面找到代码，

的index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="style.css" type="text/css" rel="stylesheet">
    <title>Todo</title>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Todo</h1>
            <div class="add">
                <div class="text">
                    <input class="data" placeholder="Enter data">

                    </input>
                </div>
                <div class="submit">
                    <div class="submit-text">
                        Add
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script
            src="https://code.jquery.com/jquery-3.3.1.js"
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
            crossorigin="anonymous"></script>
    <script src="script.js" ></script>
</body>
</html>

的script.js：

console.log("loads");
$(document).ready(function(){
    var count=JSON.parse(localStorage.getItem(todo)).length;
    $(".submit").click(function(){
        count++;        
        localStorage.setItem("todo", JSON.stringify($('.data').val()));
        var i;
        for (i = 0; i < count.length; i++) { 
            var value = "<div class='todorow'><div class='todoitem'>"+localStorage.getItem("todo").key(i)+"</div><div class='todoremove'>X</div></div>";
            $(".container").append(value);
        }
    });
    $(".container").on("click", ".todoitem", function(){
        jQuery(this).addClass("strike");
    });
    $(".container").on("click", ".todoremove", function(){
        jQuery(this).closest('.todorow').addClass("hide");
    });
    var i;
    for (i = 0; i < count.length; i++) { 
        var value = "<div class='todorow'><div class='todoitem'>"+JSON.parse(localStorage.getItem("todo").key(i))+"</div><div class='todoremove'>X</div></div>";
        $(".container").append(value);
    }
});

的style.css：

body{
    margin:0;
    padding:0;
}
.container{
    width:600px;
    margin:0 auto;
    color:#000;
}
.header{
    background:#dddddd;
    height:200px;
}
.header h1{
    color:#FFF;
    font-size:50px;
    text-align: center;
    margin-top:0px;
}
.add{
    height:50px;
    background:#FFF;
    border-left:1px solid #dddddd;
}
.text,.submit{
    display:inline-block;
    float:left;
}
.text{
    width:70%;
    height:100%;
}
.submit{
    width:30%;
    background:green;
    height:100%;
    font-size: 30px;
}
.data{
    font-size: 30px;
    /* margin-top: 10px; */
    /* padding: 10px 0; */
    padding-left: 10px;
    width:100%;
    border: none;
    padding-top: 8px;
    padding-bottom: 8px;
}
.submit-text{
    /* margin-top: 10px; */
    padding: 10px 0;
    text-align: center;
    color:#FFF;
}
.todorow{
    width:100%;
    height:50px;
    font-size: 30px;
    padding-top:10px;
    background:#000000;
    color:#FFF;
}
.todoitem{
    width:95%;
    float:left;
    display:inline-block;
}
.todoremove{
    width:5%;
    float:left;
    display:inline-block;
}
.strike{
    text-decoration: line-through;
}
.hide{
    display:none;
}

Answer 1

尝试将待办事项包装在引号

中

var count=JSON.parse(localStorage.getItem("todo")).length;

html5存储未在页面重新加载时显示数据

1 个答案: