todolist（原生）,版本0.1（仅支持pc，无响应式）

最终效果为上图所示

---

Git

git clone https://github.com/DrBallon/TodoList.git

界面

最终效果如上图所示，界面整体由上方输入框，下方内容板块和清空按钮组成

上方输入框：输入文字后，回车，将任务条添加至”正在进行“分组

下方内容板块：分为正在进行和已完成两组。每组由多个任务条组成

​ 任务条:由 状态，内容，删除按钮

​ 状态（checkbox）：当前任务条状态

​ 内容（p/input） ：显示内容。单击变为可编辑状态。可编辑状态时单击其他处切换回去并修改内容

​ 删除按钮 ：删除该任务条

清空按钮:点击清空所有内容

---

数据结构

[{
   "id": 0,"done": true,"content": "aaaa"}, 
{
   "id": 1,"done": false,"content": "bbbb"}, 
{
   "id": 2,"done": false,"content": "cccc"}]

---

事件

输入框：绑定按键事件（enter键）

任务条:
 完成状态（checkbox）：绑定点击事件，点击切换状态值并更新页面

 内容（p） / 编辑框（input）：默认为内容栏。内容栏绑定点击事
件，点击隐藏p，显示input并获得焦点。input失去焦点时，更新数据，切换回p，并更新页面

 删除按钮：动态生成时绑定任务编号（id）。绑定点击事件，点击时根据编号删除数据，更新页面。

清空按钮：点击事件。点击时清空localstorage

---

页面逻辑

 打开页面 》 从localstorage获取数据，动态生成页面 》 数据更新时，更新数据，更新页面，将新保存数据至localstorage

---

方法

​ localstorage操作（读取，设置，清空）

  //从localStorage获取数据
  function getData() {
   
    return JSON.parse(window.localStorage.getItem('data'))
  }
  //保存数据至localStorage
  function saveData(data) {
   
    window.localStorage.setItem('data', JSON.stringify(data))
  }
  //删除保存数据至localStorage数据
  function delData() {
   
    //临时变量
    tempData = []
    window.localStorage.clear()
  }