经典案例todolist做法 , localStorage 本地数据存储

 

 <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
        </section>
    </header>
    <section>
        <h2>正在进行 <span id="todocount"></span></h2>
        <ol id="todolist" class="demo-box">

        </ol>
        <h2>已经完成 <span id="donecount"></span></h2>
        <ul id="donelist">

        </ul>
    </section>

结构：注意这里不需要写出小li，因为我们后面需要动态创建小li

这个案例就是对本地存储的一个运用，我的理解它就是web当地的一个小数据库

localStorage生命周期是你自己不删除它是会一直保存的。存储的大小是5M

数据无非就是增删改查，它的存储方式是通过键值对存储。

存储数据：localStorage.setltem(key,value)

获取数据：localStorage.getltem(key) 

删除数据：localStorage.removeltem(key)

删除所有数据：localStorage.clear()

会了这些来让我们一起看js代码

$(function() {
    load();
    $("#title").on("keydown", function(event) {
            if (event.keyCode === 13) {
                if ($(this).val() === "") {
                    alert("请您输入")
                } else {
                    var local = getDate();
                    //给数组追加元素
                    local.push({ title: $(this).val(), done: false });
                    //把数组存储到本地存储 
                    saveDate(local);
                    load();
                }
            }
        })
        //保存数据
    function saveDate(data) {
        localStorage.setItem("todolist", JSON.stringify(data));
    }
    //读取本地存储的数据
    function getDate() {
        var data = localStorage.getItem("todolist");
        if (data !== null) {
            return JSON.parse(data);
        } else {
            return [];
        }
    }

    //渲染加载页面
    function load() {
        var data = getDate();
        $("ol").empty();
        $("ul").empty();
        var todoCount = 0;
        var doneCount = 0
        $.each(data, function(i, ele) {
            if (ele.done) {
                $("ul").prepend("<li><input type='checkbox' checked='checked'><p>" + ele.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>")
                doneCount++;
            } else {
                $("ol").prepend("<li><input type='checkbox'><p>" + ele.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>")
                todoCount++;
            }

        });
        $("#todocount").text(todoCount);
        $("#donecount").text(doneCount);
    }
    //删除操作，删除本地存储的数据
    $("ol").on("click", "a", function() {

            //获取本地存储
            var data = getDate();
            //修改数据
            var index = $(this).attr("id");
            data.splice(index, 1);
            //保存到本地存储
            saveDate(data);
            //重新渲染页面
            load();
        })
        //点击复选框
    $("ol,ul").on("click", "input", function() {
        //先获取本地数据
        var data = getDate();
        //修改数据
        var index = $(this).siblings("a").attr("id");
        data[index].done = $(this).prop("checked");
        //保存到本地存储
        saveDate(data);
        //渲染页面
        load();
    })

})

 思路：1.先创建一个数组(用来存储临时数据，进行数据交换)，创建一个保存数据函数，将数组传入然后保存起来。这里需要注意的是localStorage保存的是String类型，所以需要JSON.stringify()将对象转换为String类型。

        2.创建一个获得数据的方法，如果本地存储有数据就返回，没有就返回一个空数组。

        3.渲染页面：就是先获取之前存储好的数据，然后遍历数据如果done(就是这个计划已完成)是true，就创建ul下的小li  否则就创建ol下的小li。

        4.删除操作，这里删除不是单纯的删除小li，而是删除本地存储数据(也就是改数据)，这里是用的给a增加id属性，然后获得索引  从而确定删除哪一个。

        5.点击复选框就会从未完成的计划变成已完成，这里还有用的上次给a增加的id属性作为索引，然后修改数据的done值 让他和复选框处于一样的状态。

        这样一个简单的todolist案例就差不多完成了，相信根据我的思路 你一定可以做出来。让我们一起加油！