iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 21
2
Modern Web

實作經典 JavaScript 30系列 第 21

Day21: LocalStorage(ㄧ)

WES BOS系列影片
Alex快速導讀系列影片

今天要來認識
LocalStorage
看不太懂的話,這裡也有一篇我覺得寫得很好理解的筆記可以參考
localStorage 的使用

藉由練習todolist的新增,來理解LocalStorage的用法
作者在最一開始提供了三個變數,個別代表
送出、儲存、顯示

const addItems = document.querySelector('.add-items');//要送出的表單資料
const items = [];//儲存送出的表單資料
const itemsList = document.querySelector('.plates');//要顯示資料內容的區塊

我的想法是先從看得到的渲染畫面開始做,
1.先做一個渲染畫面的函式populateList
platesList => 要顯示資料內容的區塊(itemsList)
plates => 儲存送出的表單資料(items)
取得items資料後,利用map()遍歷資料,並寫成HTML

function populateList(plates = [],platesList) {
    platesList.innerHTML = plates.map((plate, i) => {
      return `
        <li>
          <input type="checkbox" data-index=${i} id="item${i}" 
          ${plate.done ? 'checked' : ''} />
          <label for="item${i}">${plate.text}</label>
        </li>
      `;
    }).join('');
  

return回來的HTML還是存在陣列中,大概會長這樣

["<li>...</li>","<li>...</li>","<li>...</li>"]

我們需要從陣列中取出,所以使用join(''),轉成字串的同時,也將逗點去除

<li>...</li> 
<li>...</li> 
<li>...</li>

寫完這段函式,就可知道,我們需要將甚麼資料寫入LocalStorage中
plate.textplate.done
也就是,items中每一個item,需要寫入
text:需完成事項
done:是否完成

2.監聽表單送出的動作、撰寫addItem函式

function addItem(e) {
    e.preventDefault()
    console.log(e)
}

addItems.addEventListener('submit',addItem)

'submit',預設會轉到新分頁,
所以首先要e.preventDefault(),阻止預設的行為
console.log(e),可以確定監聽器是否正確執行

確定可正確執行後,可以開始製作儲存資料的動作

  function addItem(e) {
    e.preventDefault()
    // console.log(e)
    const text = (this.querySelector('[name=item]')).value
    const item = {
      text,
      done: false
    };
    items.push(item)
    
    populateList(items,itemsList)
  }

如果功能只寫到這,頁面刷新後,
剛才輸入的資料都不會被記錄,而是全部都被reset
明天我們就可以利用LocalStorage的功能,
來解決這個問題。


上一篇
Day20: JS中引用與複製的差異(二)
下一篇
Day22: LocalStorage(二)
系列文
實作經典 JavaScript 3030

尚未有邦友留言

立即登入留言