todolist 包含本地存儲知識

時間 2019-11-08
標籤 todolist 包含本地存儲知識简体版
原文原文鏈接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>todolist_again</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .fat {
            width: 500px;
            height: 800px;
            margin: 50px auto;
        }
        h1 {
            font-size: 38px;
            color: goldenrod;
            display: inline;
            margin-right: 40px;
            /* vertical-align: middle; */
        }
        .todoinput {
            width: 300px;
            height: 50px;
            line-height: 50px;
            border-radius: 10px;
            border: 2px solid rgb(245, 161, 102);
            font-size: 28px;
            text-align: center;
            outline-style: none;
            /* outline-color: brown; */
            /* input得到焦點時，默認會出現一個藍色外邊框，設置outline屬性，或者border屬性，能清除該默認樣式 */
        }
        h3 {
            font-size: 34px;
            float: left;
        }
        #todocount,#donecount {
            width: 30px;
            height: 40px;
            line-height: 40px;
            border-radius: 10px;
            background: goldenrod;
            display: block;
            float: right;
            margin-top: 2px;
            text-align: center;
            color:white;
        }
        .clearfix:after {
            display: block;
            height: 0;
            line-height: 0;
            content: "";
            clear: both;
            visibility: hidden;
        }
        .clearfix {
            zoom: 1;   
        }
        .main {
            margin-top: 40px;
            margin-bottom:  20px;
        }
        li {
            width: 100%;
            background: olive;
            border-radius: 7px;
            height: 30px;
            line-height: 30px;
            margin-top: 10px;
            list-style: none;
            position: relative;
        }
        #donelist li{
            opacity: .6;
        }
        .check {
            width: 21px;
            height: 21px;
            margin-left: 10px;
            vertical-align: middle;
        }
        .content {
            color: white;
            margin-left: 28px;
            font-family: '宋體';
            font-size: 18px;
        }
        .del {
            width: 16px;
            height: 16px;
            border-radius: 7px;
            background: orangered;
            display: block;
            position: absolute;
            right: 8px;
            top: 15px;
            margin-top: -8px;
        }

    </style>
</head>
<body>
    <section class="fat">
            <section>
                    <!-- οnfοcus="this.placeholder=''" οnblur="this.placeholder='添加todo'" -->
                <h1>todolist</h1><input type="text" placeholder="添加todo" class="todoinput">
            </section>
            
            <section class="main">
                <section class="clearfix">
                    <h3>正在進行</h3><span id="todocount"></span>
                </section>
                <ol id="todolist">
                    <!-- <li>
                        <input type="checkbox" class="check"><span class="content">了jog了</span><a href="###" class="del"></a>
                    </li> -->
                </ol>
            </section>
        
            <section class="main">
                <section class="clearfix">
                    <h3>已完成</h3><span id="donecount"></span>
                </section>
                <ul id="donelist">
        
                </ul>
            </section>
    </section>
    

    <script>
        $(function(){
            // 每次刷新頁面，都要直接顯示原有的本地數據，即一刷新就將本地存儲中已有的數據渲染到頁面
            load();

            // input框得到焦點時，清空placeholder
            $('.todoinput').focus(function() {
                    $(this).prop("placeholder","");
                    // $(this).attr("style",'background:rgba(224,150,150,0.3);');//設置得到光標時輸入框的背景顏色
            });
            // input框失去焦點時，設置placeholder
            $('.todoinput').blur(function() {
                    $(this).prop("placeholder",'添加todo');
                    // $(this).attr("style",'background:;');
            });

            // 讀取本地存儲的數據，更新本地存儲數據，保存本地存儲數據，將本地存儲數據渲染到頁面
            $('.todoinput').on('keydown',function(e) {
                // 回車事件
                if(e.keyCode===13) {
                    if($(this).val()=="") {
                        alert("輸入內容不能爲空！");
                    }else {
                        // 先獲取本地存儲中的數據
                        var local = getData();
                        // 更新數據
                        local.push({title: $(this).val(),done:false});
                        // 更新後的數據保存到本地存儲
                        saveData(local);
                        //渲染頁面
                        load();
                        
                        $(this).val("");// 回車後要將input框的內容清空
                        $(this).prop("placeholder",'添加todo');//回車後回覆placeholder
                        // $(this).attr("style",'background:;');//回車後回覆輸入框背景顏色
                        // 回車後如何失去光標？？？？？？？？？？？？？？？？
                    }  
                }
            });

             // 讀取本地存儲數據
             function getData() {
                var data = localStorage.getItem("list");//讀取本地存儲中的數據，注意本地存儲的數據只能是字符串格式
                // -------------console.log(typeof(data));//string
                if(data !== null){//若是有數據，就將字符串數據轉json對象並返回數據
                    return JSON.parse(data);//JSON.parse()裏面必須是一個字符串  若是此處報錯，多是data爲undefined，多是本地存儲中的數據格式錯誤，application清空數據便可
                }else{//若是沒有數據就返回一個空數組
                    return [];
                }
            }

            // 保存本地存儲數據    注意本地存儲數據都是字符串類型
            function saveData(param) {
                localStorage.setItem("list",JSON.stringify(param));
            };

            // 加載本地存儲數據渲染到頁面中
            function load() {
                var hh = getData();//獲取本地數據，獲得的是字符串數組
                // 回車事件調用渲染方法時，每次都將本地存儲的全部數據遍歷一遍添加進列表，若是不先清除列表的話，再加載又會從新渲染一次以前的數據。因此：遍歷本地存儲以前，先將ul,ol的數據清空
                $('ul,ol').empty();
                // 計算正在進行的事件數量，已經完成的事件數量
                var todocount=0;
                var donecount=0;
                // 遍歷數組
                $.each(hh,function(i,n) {
                    // 本地存儲裏的數據分兩種，已經完成的和正在進行的
                    if(n.done==false){
                        // 若是遍歷到的當前元素是正在進行的數據，放入對應的ol中
                        $('ol').prepend("<li><input type='checkbox' class='check'><span class='content'>"+n.title+"</span><a href='javascript:;' class='del' id="+i+"></a></li>");
                        todocount++;//每添加一個Li,count加1
                    }else if(n.done==true) {
                        $('ul').prepend("<li><input type='checkbox' class='check' checked='false'><span class='content'>"+n.title+"</span><a href='javascript:;' class='del' id="+i+"></a></li>");
                        donecount++;
                    }
                });
                // 將count值賦值給span  注意用val()無效  一刷新頁面就有數據，回車就有數據，因此寫在load()裏面
                $('#todocount').text(todocount);
                $('#donecount').text(donecount);
            };

            // 點擊複選框，ul,ol的數據相互切換   修改done屬性，done爲false就是正在進行，done爲true就是已完成
            $('ul,ol').on('click','input',function() {
                //獲取本地存儲數據
                var data = getData();
                // 找到當前li所對應的本地存儲中的數據，將該數據的done屬性修改
                var index = $(this).siblings('a').attr('id');//獲取自定義屬性用attr()
                console.log($(this).prop('checked'));//被選中的複選框checked屬性爲true
                console.log($(this).parent().siblings('li').children('input').prop('checked'));//未被選中的複選框checked屬性爲false        
                //-----------------將複選框的checked屬性值賦給done false or true
                // ？爲何點擊正在進行的複選框不會勾選----------由於一點擊，就從新渲染頁面把該條數據給放到已完成列表了
                data[index].done = $(this).prop('checked');
                // 將具備新checked屬性的數據保存在本地存儲
                saveData(data);
                // 從新渲染頁面
                load();
            });

            // 點擊a標籤刪除當前li  ！！！！！！！！！！！！注意：不是刪除頁面元素，而是從本地存儲中刪除數據
            $('ul,ol').on('click','a',function() {//注意！！！？？？？？直接用類名錶示兩個列表中的a標籤會出問題，爲何？？？？？？？？？？？？？？？？？？？
                var info = getData();
                // 獲取到當前a的索引號，而後從本地存儲中找到相對應索引號的數據，刪除
                var index = $(this).attr("id");
                // 刪除數組的某個元素用splice(數組下標,個數)
                info.splice(index,1);//從索引index處開始，刪除一個元素
                saveData(info);
                load();
            });

        })
    
    </script>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。