前端|作一個TODO，練習DOM操做（原生JS版本）

這是我在github上的todo例子，你們感興趣的話能夠先去看看。

原生js版本:https://github.com/remy-cpu/VanillaJS-Todo

jQuery版本:https://github.com/remy-cpu/JQuery-Todo

可參考例子：todoMVC 。

界面樣式

 

功能需求

• 添加 / 刪除 todo
• 完成 / 取消完成 todo
• 顯示全部/ 未完成/ 已完成/ 已刪除 的 todo
• 顯示已完成的todo的數目和全部todo的數目
• 提供修改 todo 功能
• 清除全部已經完成的 todo
• 添加回收站功能，能夠查看全部已刪除的todo，能夠從已刪除的todo中恢復todo，能夠清空回收站
• 嘗試給todo加上優先級（高級、中級、無優先級）。優先級高的會顯示在比較靠上面。（同級「後來者居上」）
• 添加用戶驗證: 登陸註銷，利用 Local Storage

 

接下來咱們會詳細地講解這些功能的實現，你們準備好了嗎？嘿嘿。

主要思路：咱們作添加、刪除、優先級設置等操做時，都會把這些參數（或者說狀態）保存到本地裏， 而後從新渲染頁面load( ).

準備工做

//讀取本地數據
  function getData() {
    var data = localStorage.getItem("storeUsers");
    if (data !== null) {
      return JSON.parse(data);
    } else {
      return [];
    }
  }
  //保存本地存儲數據
  function saveData(data) {
    localStorage.setItem("storeUsers", JSON.stringify(data));
  }

  //獲取刪除的數據
  function getDeleted() {
    var data = localStorage.getItem("dels");
    if (data !== null) {
      return JSON.parse(data);
    } else {
      return [];
    }
  }

  //保存刪除的數據
  function saveDeleted(data) {
    localStorage.setItem("dels", JSON.stringify(data));
  }

 

添加 / 刪除 todo

一、添加issue

分析：咱們在input文本框輸入issue，按下回車鍵，將這條issue存入users數組中，在通過渲染頁面，插入到頁面中。

//最終本地存儲數據示例
[
  {
    name: "11",//用戶名
        password: "123456",//用戶密碼
        todos: [{
        title: "23",            //issue具體內容
        completed: false, //issue完成狀況
        priority: 0            //issue優先級
      }]
  }
]

//保存刪除的數據是爲咱們以後作回收站功能作準備
[
  {
    name:"11",
  done:[{
        title: "23",            //issue具體內容
        completed: false, //issue完成狀況
        priority: 0            //issue優先級
       }]
 }
]

function addItem() {
      //建立新的li
      var input = document.querySelector('.input');
      input.onkeyup = function (e) {
        //若是文本框內容爲空，就彈出警告框，想好看點也能夠本身作一個提示框
        if (input.value == '') {
          alert("輸入內容不能爲空");
          return false;
        }
        //若是按下的是回車鍵
        if (e.keyCode == 13) {
          //必須先登陸
          if (!online) {
            showTips("請先登陸 ！");
            input.value = '';
            return false;
          }
          
          //獲取數組
          var users = getData();
          //找到這是users數組中的第幾個用戶
          cnt = Match(users);
          
          //找到的todos數組中第一個優先級爲0的issue
          var index;
          for (var i = 0; i < users[cnt].todos.length; i++) {
            if (users[cnt].todos[i].priority == 0) {
              index = i;
              break;
            }
          }
          
          //每一條issue的基本形式
          var obj = {
            title: this.value,
            completed: false,
            priority: 0        //剛添加的issue的優先級都爲零
          };
          
          //這裏是體現同級者後來居上
          //將新的issue插入到你找到的todos數組中第一個優先級爲0的issue前面
          users[cnt].todos.splice(index, 0, obj);
          //保存數組
          saveData(users);
          //每次都先把新的li添加到本地存儲，再連同以前的issue一塊兒渲染到頁面上
          load();
          
          //清空文本框的內容
          input.value = '';
        }
      }
    }

接下來會繼續更新，但願和你們多多交流！！