使用原生 Javascript 做一个 todolist

前言：为了更加熟悉 LocalStorage 所以来製作一个 todolist

自我提醒 :把资料放进去 localStorage 是用 setItem()，把资料取出来是

getItem()。

複习观念可以看我之前的文章 关于 localStorage 使用说明

範例网址

画面

透过使用 localStorage 存取你所输入的资料，在你关闭页面标籤或浏览器再重新开启时，你原本製作的清单和内容，将被呈现出来。

接下来先有 HTML 我们要先有骨架，再加上 css 包装他的外表：

HTML

     <div class="content">        <div class="addList">          <input type="text" class="text"  placeholder="" required >          <input type="button" class="send" value="加入代办">        </div>        <ul class="list"></ul>        </div>  </div>

我们必须要宣告 三个东西：

指定 DOM

let send = document.querySelector('.send');let text = document.querySelector('.text');let list = document.querySelector('.list');

每次在页面读取时，使用 getItem() 方法从 localStorage 取出资料，并透过 JSON.parse() 方法将资料转换成原本的格式。然而第一次在提取资料会取不到资料，因此需要建立一个新的空阵列：

let data =  JSON.parse(localStorage.getItem("todolist"))||[];

使用者点击画面 使用监听事件

send.addEventListener('click', addTodo);

製作一个 名为 addData 的 function 我们要製作一个物件，让把物件存进 localStorage。
hint : localStorage setItem() 里面的东西 我要把它转字串喔

JSON.stringify 将阵列转换为 JSON 字串

function addData(e){ e.preventDefault; // 找到localStorage 存入 里面的值 使用setItem() // 捞出输入键的值let text =document.querySelector('.text').value; // 因为要把输入的值变成 阵列 所以製作一个空物件  let todo ={   myItem: text } //在一开始的资料宣告let data （array） 塞进东西 // 建立一个物件，之后新增的档案会存放在此 data.push(todo); // 这是更新画面的function updateList(data); // 存在Localstoreage localStorage.setItem('myItem', JSON.stringify(data));}; 

把接受来的画面渲染出画面，製作一个 updateList 的 function

function updateList(data){  let str ='';  let len =data.length;  for(let i =0;i<len;i++){     str += `<li>  <a href="#" data-num =${i}>             <i class="fa fa-times">              </i></a> <span>${data[i].myItem} </span>                 </li>`  }  list.innerHTML =str;}<li>           `

 接下来是呈现像这样的画面：

接下来做删除功能喔，使用 dataset 及 data-* 属性来做删除。

製作一个 function 叫做 toggleData 可以删除功能喔。

function toggleData(e) {       // 使用dataset 取得属性资料    var num = e.target.dataset.num;    console.log(num);    if (e.target.nodeName !== 'A') {        return;    }    //找到a连节以外的节点就中断     // 利用js的splice()删除array 功能    data.splice(num, 1);    //删除资料、让?在重新更新    localStorage.setItem('myItem',JSON.stringify(data));       update(data);}

结语：这样大概就是一个十分简单的 todolist 做出来了，不管你有没有懂，我来分享一个小小想法，就是试着把方法说出来，不看文章就算是自说自话也好，对着空气，把你的逻辑说出来吧！如果真的想不到再看一下别人是怎么做的。
下一个单元预告，我们来结合之前所做的 bmi 计算器，来做个可以有记录和删除的计算机（希望拉～）