首先在這裡給大家拜個晚年，祝大家新年愉快，程式設計功力節節高升~~
我自己有制定年度規劃的習慣，之前也一直在用OneNote在做。OneNote雖然好用，可是沒有相關統計功能。這樣就不容易把握計劃制定的是否合理。於是就趁著放假，順手做一個簡單的ToDoList小程式。
需求分析
這個專案就先叫他EasyTodoList吧。不過先別急著動手，先利用腦圖簡單整理一下需求。這樣既可以清楚地知道需要哪些東西以及從哪下手，也可以防止在做的過程中歪樓。
技術選擇
技術方面Vue和vue-router相信不會有什麼問題，畢竟是現在的主流之一。所以這一次的主要問題是在儲存的選擇上。
首先，先去掉MySQL和MongoDB，因為這僅僅只是一個小專案，資料量也不是很大。因此沒有必要上後端的東西。
那麼剩下就是客戶端儲存了。在客戶端儲存中，storage只能進行簡單的key-value儲存，沒有查詢和統計的功能；而WebSQL雖然用起來很爽，但已經是不在維護的專案了，所以也不推薦使用了；最後就是IndexedDB了，IndexedDB是目前比較推薦的客戶端儲存技術了。類似於MondgoDB的NoSQL資料庫。因為原生API相對繁瑣，為了簡化開發，這裡就使用二次開發的PocuhDB來作為客戶端儲存（API呼叫很簡單，參考一下官網就能搞定）。（關於客戶端儲存的相關內容可以檢視我之前的文章客戶端儲存技術）
需要注意的是，IndexedDB也是客戶端儲存的一種，自然也有客戶端儲存的特性。那麼當改變瀏覽器或者改變監聽埠時，之前儲存的資料自然也就消失不見了（相當於重新換了個資料庫），這在使用上或多或少帶來了不便。
效果展示
先來看一下最終做出來的效果。
整個專案比較簡單，只有總覽以及任務列表兩個頁面。在新增了任務分類以及分類下的任務後，在總覽頁面就會有相關統計。在設定任務完成後，也會統計完成與未完成的任務的比例以及圖表。圖表部分是用Echarts來進行繪製的，繪製的方法也可以參考官方文件。
因為程式碼量不多也就不在這裡多囉嗦了。詳細程式碼可以來我的GitHub上參觀指導。 專案地址：EasyTodoList
總結
整個專案在技術上沒有難點，是個很容易擼的專案。結合了前端儲存（IndexedDB），雖然簡化了開發也帶來了使用上的不便。不過作為一個練手的專案應該是比較不錯的了。因為儲存的問題非常尷尬，所以接下來考慮移植到Electron上，直接做成一個App來避免這個問題。