# localStorage存储TODOLIST

最新推荐文章于 2022-05-13 19:35:46 发布

大名张无忌

最新推荐文章于 2022-05-13 19:35:46 发布

阅读量193

点赞数

分类专栏： JS # jQuery 文章标签： js javascript html jquery

本文链接：https://blog.csdn.net/qq_40029828/article/details/105444602

版权

JS 同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

jQuery

7 篇文章 0 订阅

订阅专栏

1、html

<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<script src="jqueryMin.js"></script>
<script src="index.js"></script>
<body>
<div class="container">
    <div class="tab">
        <a class="" href=javaxcript:;>Todolidt</a>
        <input type="text" id="title" name="title" placeholder="待办事项" autocomplete="off">
    </div>
    <div class="list">
        <h4>正在进行 <span class="todoNum"></span></h4>
        <ol class="todolist">
        </ol>
        <h4> 已经完成<span class="doneNum"></span></h4>
        <ol class="donelist">


        </ol>
    </div>
</div>
</body>
</html>

2、index.js文件

$(function () {
    //4、将localstorage的内容放进小li中,声明显示函数
    var displayData = function () {
        //需要先清空，否则append会导致重复生成
        $(".todolist").empty("li");
        $(".donelist").empty("li");
        $(JSON.parse(localStorage.getItem("todo"))).each(function (i, datax) {
            //判断done属性，决定放在哪个list里面
            if (datax.done) {
                var li = $("<li><input checked='checked' type=\"checkbox\"><p>" + datax.title + "</p><a id=" + i + " href=javascript:;></a></li>")
                $(".donelist").append(li);
            } else {
                var li = $("<li><input type=\"checkbox\"><p>" + datax.title + "</p><a id=" + i + " href=javascript:;></a></li>")
                $(".todolist").append(li);
            }
        });
        //span中的数字就是对应的list中li的个数
        $(".todoNum").text($(".todolist li").length);
        $(".doneNum").text($(".donelist li").length);
    };
    displayData();
    //1、声明读取函数和存入函数
    var getData = function () {
        var dat = JSON.parse(localStorage.getItem("todo"));
        if (dat != null) {
            return dat;
        } else {
            return [];
        }
    };
    var saveData = function (dat) {
        localStorage.setItem("todo", JSON.stringify(dat));
    };
    // 2、回车时将内容存入todo
    $("#title").on("keydown", function (ev) {
        if (ev.keyCode === 13) {
            if ($(this).val() == "") {
                alert("请输入内容");
            } else {
                var data = getData();
                data.unshift({title: $("#title").val(), done: false});
                console.log(data);
                saveData(data);
                displayData();
            }
        }
    });
//3、keyup时将input中的内容置空
    $("#title").on("keyup", function (ev) {
        if (ev.keyCode === 13) {
            $(this).val("");
        }
    });
    //5、点击删除按钮删除对应的小li，声明一个删除函数
    var delData = function (index) {
        var data = getData();
        data.splice(index, 1);
        saveData(data);
    };
    $(".todolist, .donelist").on("click", "a", function () {
        //获取自定义属性id需要用attr，这里直接用each的index不行，因为index不会变化，需要在displayData函数中重新获取id
        delData($(this).attr("id"));
        displayData();
    })
    //6、复选框点击修改done属性的值与checked一致
    $(".todolist,.donelist").on("click", "input", function () {
        var data = getData();
        var index = $(this).siblings("a").attr("id");
        data[index].done = $(this).prop("checked");
        saveData(data);
        displayData();
    })
});

3、style.css文件

* {
    margin: 0 auto;
    padding: 0 auto;
}

a {
    text-decoration: none;
}

.container {
    text-align: center;
}

.container .tab {
    width: 100%;
    background-color: #1d7db1;
    height: 100px;
    color: #ffffff;
    font-size: 30px;
    line-height: 100px;
}

.container .tab a {
    color: #fff;
}

.container .tab input {
    width: 400px;
    height: 60px;
    font-size: 16px;
}

.list {
    width: 100%;
    font-weight: 700;
    text-align: left;
    font-size: 22px;
    padding-left: 200px;
}

.list li {
    position: relative;
    list-style: none;
    margin-top: 10px;
    width: 800px;
    height: 30px;
    margin-left: 20px;
    font-size: 20px;
    background-color: #cccdcd;
    border-radius: 7px;
    line-height: 30px;
}

.list .donelist li {
    background-color: #a4a4a4;
}

.list h4 {
    position: relative;
    width: 100%;
}

.list span {
    position: absolute;
    left: 800px;
    top: 10px;
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 15px;
    border-radius: 10px;
    text-align: center;
    background-color: gray;
}

.list li input {
    position: absolute;
    left: 20px;
    top: 5px;
    width: 20px;
    height: 20px;
}

.list li p {
    position: absolute;
    left: 50px;
}

.list li a {
    position: absolute;
    left: 760px;
    top: 5px;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: gray;
    border-radius: 10px;
}

大名张无忌

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
# localStorage存储TODOLIST

1、html<!doctype html><html lang="en" xmlns="http://www.w3.org/1999/html"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width...
复制链接

扫一扫