简单本地todo封装

利用localStorage封装todo逻辑

需要注意的是：

监听每个item是否被checked逻辑中，如果直接将监听事件绑定到每个item上，会导致新的item在被渲染后未能被成功添加此事件。

当然也可以使用传统方法获取动态DOM节点如getEelementById,但是要通过[``mutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)不断的获取更新的DOM才能保证新的item也被添加上监听事件。

另一个方法是，可以将点击事件绑定到父元素上，通过e.targe.matches方法得到此item，然后通过获取存储在该item dataset中的索引来改变items对象中的值。

class LocalToDo {
  constructor(submitForm, itemsWrapper, selectAll, clearAll) {
    this.submitForm = submitForm;
    this.itemsWrapper = itemsWrapper;
    this.selectAll = selectAll;
    this.clearAll = clearAll;
    this.items = JSON.parse(localStorage.getItem('item')) || [];
  }
  init() {
    this.render(this.itemsWrapper, this.items);
    this.submitForm.addEventListener('submit', this.addItem.bind(this));
    this.itemsWrapper.addEventListener('click', this.toggleCheckbox.bind(this));
    this.selectAll.addEventListener('click', this.toggleSelectAll.bind(this));
    this.clearAll.addEventListener('click', this.handleClear.bind(this));
  }
  addItem(e) {
    e.preventDefault();
    const text = this.submitForm.querySelector('[name=item]').value;
    this.items.push({ text, checked: false });
    this.render(this.itemsWrapper, this.items);
    localStorage.setItem('item', JSON.stringify(this.items));
    this.submitForm.reset();
  }
  render(itemsWrapper, items = []) {
    this.itemsWrapper.innerHTML = this.items
      .map(
      (item, i) => `
<li>
<input type=checkbox data-index=${i} id=item${i} ${item.checked ? 'checked' : ''} >
<label for=item${i}>${item.text}</label>
</li>
`
    )
      .join('');
  }
  toggleCheckbox(e) {
    if (!e.target.matches('input')) return;
    const index = e.target.dataset.index;
    this.items[index].checked = !this.items[index].checked;
    localStorage.setItem('item', JSON.stringify(this.items));
  }
  toggleSelectAll() {
    if (this.selectAll.checked) {
      this.items.forEach(item => (item.checked = true));
      localStorage.setItem('item', JSON.stringify(this.items));
      this.render(this.itemsWrapper, this.items);
    } else {
      this.items.forEach(item => (item.checked = false));
      localStorage.setItem('item', JSON.stringify(this.items));
      this.render(this.itemsWrapper, this.items);
    }
  }
  handleClear() {
    localStorage.removeItem('item');
    this.items = [];
    this.render(itemsList);
  }
}

const addItems = document.querySelector('.add-items');
const itemsList = document.querySelector('.plates');
const selectAll = document.querySelector('#select-all');
const clearAll = document.querySelector('#clear-all');

new LocalToDo(addItems, itemsList, selectAll, clearAll).init();