使用本地儲存localStorage儲存資料的todoList
阿新 • • 發佈：2019-02-14
ToDoList 幫你把要做的事情列出來，一項一項，類似思維導圖。
最明顯的好處是強迫自己整理出任務的每個部分，理順後按部就班的完成，提高效率。
現在,我們來使用js來做一個todolist
基本功能
開始的構思是用一個input來輸入要做的事情,按鈕確定,然後新增的列表,單擊列表裡的專案,就會使該專案消失,即完成..
於是,寫下如下程式碼:
<body>
<div>
<input title="todo" id="txt" type="text"/>
<button id="btn1">TO DO</button 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" 這樣就做到了一個簡單的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;
}
