JavaScript 30 Day -- 14 LocalStorage

实现效果：

使网页模拟菜单的效果，在页面中添加新的菜品，而且在页面刷新之后也不清空。

关键点：

Event
    event.preventDefault //阻止默认行
    eventTarget.addEventListener  //事件监听
localStorage
    localStorage.setItem()  //储存在浏览器上
    localStorage.getItem()  //从浏览器上获取
JSON
    JSON.stringify()
    JSON.parse()

javascript

    const addItems = document.querySelector('.add-items');
    const itemsList = document.querySelector('.plates');
    const items = JSON.parse(localStorage.getItem('item')) || [];

    addItems.addEventListener('submit',addItem);
    itemsList.addEventListener('click',toggleDone);

    function addItem(e){
      e.preventDefault(); //阻止默认行为
      const text = (this.querySelector('[name=item]')).value;
      // console.log(text);
      const item = {
        text:text,  // ES6 => text
        done: false // 为后续的勾选做准备
      };
      // console.log(item);
      items.push(item);
      // console.log(items);

      populateList(items,itemsList);
      localStorage.setItem('item',JSON.stringify(items));
      this.reset(); //以清空 input 中正在输入的值
      // console.log(items);
      // console.log('GG');
    } 
    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('');
    }

    function toggleDone(e){
      if(!e.target.matches('input')) return;
      const el = e.target;
      const index = el.dataset.index;
      items[index].done = !items[index].done;
      localStorage.setItem('items',JSON.stringify(items));
      populateList(items,itemsList);
    }
    populateList(items,itemsList);