今天我們要來做用 localStorage 儲存跟讀取的 ToDoList

我們一樣 focus 在 JavaScript 上。

先設變數

list 是我們在輸入框下方要增加資料的 ul class 名稱
add 是我們要監聽事件的 button

let list = document.querySelector('.list')
let add = document.querySelector('.addData')

data 是我們要去拿 localStorage 的資料，我們要用 parse 轉成陣列，因為我們儲存的時候是用字串的方法，所以我們要把他轉回來，

||[] 這個部分是因為第一次使用 ToDoList 的使用者，因為 localStorage 的 'dataList' 拿不到任何資料， 所以我們要給他一個空陣列，避免出錯。
下次使用的時候，就可以拿到 localStorage 的 'dataList' 的資料。

let data = JSON.parse(localStorage.getItem('dataList')) ||[]

接著我們要下監聽事件跟 callback function

add.addEventListener('click',addData)
list.addEventListener('click',deleteData)
upDateList(data)

因為上面我們定義了 function，下面我們來做一下 function 的部分。

addData function

1. 我們先取消了預設的事件。
2. 我們要拿到 input 內 value 的值。
3. let toDolist = { content : txt } 我們把 toDolist 的格式存成 object。
4. data.push(toDolist) 把從 localStorage 拿到的資料塞到上面設的陣列中。
5. upDateList(data) 把上面塞進去的資料，更新讓畫面顯示出來。
6. 把資料轉成 JSON 格式的字串更新到 localStorage。

function addData(e){
  e.preventDefault()
  let txt = document.querySelector('.input').value
  let toDolist = {
    content : txt
  }
  data.push(toDolist)
  upDateList(data)
  localStorage.setItem('dataList',JSON.stringify(data))
}

upDateList function

這裏我們要把更新後的資料轉成 HTML 的樣子在畫面呈現。

我們設了一個空字串
利用 for 迴圈的方式，把每一筆資料印出來。

最後在把資料塞到 ul 內。

function upDateList(items){
  str = ''
  let len = items.length
  for (let i=0; i<len; i++){
    str+= '<li><a href="#" data-index="' + i + '">Delete</a><span>' + items[i].content + '</span></li>'
  }
  list.innerHTML = str
}

deleteData function

資料刪除 function

這裏我們下一個判斷式，如果點到的目標不是 LI， 我們就什麼都不做。
if(e.target.nodeName !== 'LI'){return}

每條 li 都要有順序，我們上面已經用 dataset index 的方式列表了，所以我們可以精準的選到我們要刪除的相對應的 object。

最後，我們要一樣要更新陣列的資料，所以要把刪除後的 data 存回去我們的 localStorage ，這樣下次叫出來的時候，就會是我們更新後的資料了

function deleteData(e){
  e.preventDefault()
  if(e.target.nodeName !== 'LI'){return}
  let index = e.target.dataset.index
  data.splice(index,1)  localStorage.setItem('dataList',JSON.stringify(data))
  upDateList(data)
}

以上，明天見。