前端|做一个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

1、添加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 = '';
        }
      }
    }

接下来会继续更新，希望和大家多多交流！！