記錄個人Vue學習 --- 寫一個簡易的TodoList + localStorage

這個TodoList很簡單，只包括此時日期的展現、todo項的展現以及todo項的添加。 這裏是DEMO📃

先寫一個最簡易的不加樣式的todolist：

1.先搭一個基本的HTML結構

用<li></li>標籤存放todo項，裏面包含一個checkbox，一個todo項的內容的<span>以及一個刪除<span>:

<li v-for="list in lists">
    <input type="checkbox"/>
    <span>{{ list.text }}</span>
    <button>刪除</button>
</li>
複製代碼

用input輸入框和button按鈕用於添加todo項:

<input type="text"/>
<button>添加</button>
複製代碼

這個項目我把todo項的列表保存在一個數組裏：

lists : [
    //{
        //id : 0
        //text : '',
        //finished : false
    //}
]
複製代碼

2.操做時綁定上方法

當寫入事件並點擊添加按鈕的時候，用v-model綁定input輸入框輸入內容、用@click綁定一個方法用於添加事件：

<input type="text" v-model="inputValue" @keyup.enter="addList"/>
<button @click="addList">添加</button>

addList(){//添加一個備忘
    if(this.inputValue != ''){
        this.lists.push({id : this.lists.length,text : this.inputValue,finished : false});
        this.inputValue = '';
    }
}
複製代碼

刪除按鈕用@click綁定deleteList方法：

button @click="deleteList(list)">delete</button>

deleteList(list){                   
    this.lists.splice(this.lists.indexOf(list),1);                                
}
複製代碼

這兩塊就是整個todo項目的核心，再加上日期模塊：

日期的展現模塊：

建立一個鉤子函數created()，由於想要在渲染成視圖以前就得到當前的日期。

一週七日，一年十二月，將這些對應的時間字符串歸於數組裏。

用new Date()得到本地的時間，而getDate()、getMonth()、getDay()能夠提取出對應的多少號、第幾個月（從0 計數）、星期幾（星期天即0，星期一即6）。

再把得到的時間展現：

var weekday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var month = ['January ','February ','March ','April ','May ','June ','July ','August ','September ','October ','November ','December '];
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth(); //January is 0!
this.weekday = weekday[today.getDay()];
this.month = month[mm];
this.day = dd;
複製代碼

最後再用CSS渲染一下，UI也變得好看啦🤞：

可是由於網頁一旦刷新，我記錄的內容就會跟着跑路，因此我看了紅寶書，查閱發現localStorage能夠持久保持客戶端數據的一種方案，大部分瀏覽器會設置5MB的限制（Chrome和Safaris 2.5MB），不過想來也是夠用了。重要的是數據會保留到經過JavaScript刪除或者用戶清除瀏覽器緩存。

localStorage儲存鍵值對的數據，因此我打算儲存整個lists數組，將其值用JSON.stringify()轉換成字符串儲存。

localStorage設置用setItem：

localStorage.setItem(key,JSON.stringify(val));
複製代碼

取值用getItem：

localStorage.getItem(key);
複製代碼

而後要用鉤子函數created()在渲染以前就得到localStorage的lists：

this.lists = myStorage.get('lists') || [];

//JSON字符串處理的緣由，我學習封裝了getItem()和setItem()
function set(key,val){
    localStorage.setItem(key,JSON.stringify(val));
}
function get(key){
    return JSON.parse(localStorage.getItem(key));
}
複製代碼

這樣子localStorage就會保存個人記錄，刷新和重啓頁面也不在怕啦hiahia

這就是我對vue.js和localStorage簡單的學習應用, 完整的代碼能夠查看個人github😊