1. 程式人生 > >使用本地儲存localStorage儲存資料的todoList

使用本地儲存localStorage儲存資料的todoList

ToDoList 幫你把要做的事情列出來,一項一項,類似思維導圖。
最明顯的好處是強迫自己整理出任務的每個部分,理順後按部就班的完成,提高效率。
現在,我們來使用js來做一個todolist

基本功能

開始的構思是用一個input來輸入要做的事情,按鈕確定,然後新增的列表,單擊列表裡的專案,就會使該專案消失,即完成..
於是,寫下如下程式碼:

<body>
<div>
    <input title="todo" id="txt" type="text"/>
    <button id="btn1">TO DO</button
>
</div> <div id="showList" class="show"> </div> </body>
var txt = document.getElementById("txt"),
    btn = document.getElementById("btn1"),
    show = document.getElementById("showList");
btn.addEventListener("click", addList, false);

function addList() {
    var list = document.createElement("div"
); list.setAttribute("class", "lists"); list.innerHTML = txt.value; list.addEventListener("click", function xx() { if (confirm("這項任務已經完成 ? ")) { this.parentNode.removeChild(this); } }, false); show.insertBefore(list, show.childNodes[0
]); }

這樣就做到了一個簡單的todoList,但是這樣是遠遠不夠的,如果使用者在使用過程中不小心關閉了瀏覽器,重新整理,斷電等情況那我們理清的list就白費了,所以我們需要把這些list儲存到本地儲存中去!

新增本地儲存功能

HTML5 提供了兩種在客戶端儲存資料的新方法:

localStorage - 沒有時間限制的資料儲存
sessionStorage - 針對一個 session 的資料儲存

之前,這些都是由 cookie 完成的。但是 cookie 不適合大量資料的儲存,因為它們由每個對伺服器的請求來傳遞,這使得 cookie 速度很慢而且效率也不高。

在 HTML5 中,資料不是由每個伺服器請求傳遞的,而是隻有在請求時使用資料。它使在不影響網站效能的情況下儲存大量資料成為可能。

對於不同的網站,資料儲存於不同的區域,並且一個網站只能訪問其自身的資料。

localStorage.setItem(key, value);

loaclStorage和cookie一樣使用鍵值對的形勢儲存資料

讀取資料時和cookie不同,cookie返回的是一個字串,localStorage返回的是以個字串陣列:

var key = localStorage.key(i),
    val = localStorage[key];

接下來給我們的todolist新增本地儲存功能,我們把建立每一個list的當前時間作為localStorage的鍵,內容作為值,並在html裡新增一個計數器,用來顯示當前list條數

並新增使用者點選條目後不是消失,而是變綠並移動到已完成的div中去,使程式的表現更為直觀

/* 新增到list */
function addList() {
    if (txt.value.trim() != "") {
        var list = document.createElement("div"),
            date = new Date().toLocaleString(),
            time = new Date();
        list.setAttribute("class", "lists");
        list.innerHTML = ten(time.getHours())+":"+ten(time.getMinutes())+":"+ten(time.getSeconds())+" : " + txt.value;
        list.setAttribute("data-hex", date);
        localStorage.setItem(date, txt.value);
        list.addEventListener("click", function xx() {
            if (confirm("這項任務已經完成 ? ")) {
                //this.parentNode.removeChild(this);
                document.getElementById("overList").appendChild(this);
                var countOver = document.getElementById("overCount");
                countOver.innerHTML = parseInt(countOver.innerHTML) + 1;
                this.setAttribute("class", "overLists");
                localStorage.removeItem(date);
                var count = document.getElementById("count");
                if (parseInt(count.innerHTML) > 0) {
                    count.innerHTML = parseInt(count.innerHTML) - 1;
                }
                this.removeEventListener("click", xx, false);
            }
        }, false);
        show.insertBefore(list, show.childNodes[0]);
        count.innerHTML = parseInt(count.innerHTML) + 1;
        txt.value = "";
    } else {
        alert("what to do ?!");
    }
}

/* 小於十前面加0 */
function ten(num){
    if(parseInt(num)<10){
        return "0"+num;
    }else{
        return num;
    }
}

從本地儲存載入list

/* 讀取本地儲存中的list */
count.innerHTML = localStorage.length;
for (var i = 0, len = localStorage.length; i < len; i++) {
    var list = document.createElement("div"),
        key = localStorage.key(i),
        val = localStorage[key];
    list.setAttribute("class", "lists");
    list.setAttribute("data-hex", key);
    list.innerHTML = key + " : " + val;
    list.addEventListener("click", function yy() {
        if (confirm("這項任務已經完成 ? ")) {
            this.parentNode.removeChild(this);
            document.getElementById("overList").appendChild(this);
            var countOver = document.getElementById("overCount");
            countOver.innerHTML = parseInt(countOver.innerHTML) + 1;
            this.setAttribute("class", "overLists");
            var count = document.getElementById("count");
            count.innerHTML = parseInt(count.innerHTML) - 1;
            var key = this.getAttribute("data-hex");
            localStorage.removeItem(key);
            this.removeEventListener("click", yy, false);
        }
    }, false);
    show.insertBefore(list, show.childNodes[0]);
}

與addList()大同小異

新增樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>To Do List</title>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="icon" href="img/icon.gif"/>
</head>
<body>
<div class="header">
    <div id="title">
        <img src="img/title.gif"/>
        <div id="my">—— by Chation</div>
    </div>
</div>
<div class="container">
    <div id="inputList">
        <input title="todo" id="txt" type="text" onkeypress="enterPress(event)"/>
        <button id="btn1">TO DO</button>
    </div>
    <h3>還有 <span id="count" class="warning">0</span> 項未完成</h3>
    <div id="showList" class="show">
    </div>
    <h3>已經完成 <span id="overCount" class="success">0</span></h3>
    <div id="overList" class="show">
    </div>
</div>
<div class="foot">
    <span id="nowTime">Now Time : 00:00:00</span>
</div>
<script src="js/todolist.js"></script>
</body>
</html>
.lists{
    padding: 20px;
    margin: 10px;
    background-color: #FFF8BF;
    box-shadow: 5px 4px 10px 2px gray;
    border-left: 10px #4078C0 solid;
}
.overLists{
    padding: 20px;
    margin: 10px;
    background-color: rgba(209, 252, 181,0.5);
    color: #8F8F8F;
    /*box-shadow: 5px 4px 10px 2px gray;*/
    border-left: 10px #4078C0 solid;
}
.show{
    width: 500px;
    margin:0 auto;
}
#inputList{
    width: 392px;
    margin:0 auto;
}
#showList{
    border-bottom: 1px solid #8B8B8B;
    padding-bottom: 20px;
}

.success{
    color: #5CB85C;
}
.warning {
    color: #D9534F;
}

#txt {
    padding: 5px 10px 5px 10px;
    width: 300px;
    font-size: large;
    border: 1px solid #B8B8B8;
}
#txt:focus{
    border:1px solid #3385FF;
}
#btn1{
    width: 70px;
    height: 35px;
    margin-left:-5px;
}

.header{
    height: 50px;
    width: 100%;
    background-color: #bbdad1;
    position: fixed;
    top:0;
}
.container{
    width: 650px;
    margin:100px auto;
    padding: 20px;
    background-color: rgba(190,190,190,0.5);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;;
}
.foot{
    font-size: large;
    text-align: center;
    width: 200px;
    margin:50px auto;
    padding: 20px;
    background-color: rgba(190,190,190,0.5);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;;
}
body {
    /*background-color: #F5F5F5;*/
    background-image: url(../img/bg1.png);
    margin:0;
    padding: 0;
}
#my{
    float: right;
    color:#B8B8B8;
    padding: 30px 10px 0 0;
}

這裡寫圖片描述

這裡寫圖片描述