2021年7月9日1 分鐘閱讀次瀏覽

Day15: LocalStorage｜用 localStorage 保存清單資料

如何使用 localStorage 儲存和管理清單資料，重新整理頁面後資料也不會消失。

簡介：如何使用 LocalStorage 來儲存和管理。

作品頁面：https://iris1114.github.io/javascript30/15_LocalStorage/

HTML

包含一個標題 LOCAL TAPAS。
一個顯示項目的 ul 列表，初始內容為 Loading Tapas...。
一個表單，包含一個輸入框和一個提交按鈕，用於添加新項目。

<div class="wrapper">
  <h2>LOCAL TAPAS</h2>
  <p></p>
  <ul class="plates">
    <li>Loading Tapas...</li>
  </ul>
  <form class="add-items">
    <input type="text" name="item" placeholder="Item Name" required />
    <input type="submit" value="+ Add Item" />
  </form>
</div>

JavaScript

從 LocalStorage 中獲取已儲存的項目，並將其解析為 JavaScript 陣列。
定義 addItem 函數，用於處理表單提交事件，將新項目添加到陣列中，並更新 LocalStorage。
定義 populateList 函數，用於將項目渲染到 ul 列表中。

const addItems = document.querySelector('.add-items')
const itemsList = document.querySelector('.plates')
const items = JSON.parse(localStorage.getItem('items')) || []
 
function addItem(e) {
  e.preventDefault()
  const text = this.querySelector('[name=item]').value
  const item = {
    text,
    done: false,
  }
 
  items.push(item)
  populateList(items, itemsList)
  localStorage.setItem('items', JSON.stringify(items))
  this.reset()
}
 
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('')
}
 
addItems.addEventListener('submit', addItem)
populateList(items, itemsList)