チェックボックスの値をローカルストレージに保存する

let fallback = [];
const $e = query => document.querySelector(query);


// Return a todo list.
const getToDoList = () => {
  let data = null;
  
  try {
    data = JSON.parse(localStorage.getItem('todo'));
  } catch (e) {
    data = fallback;
  }
  
  return data == null || Array.isArray(data) == false ? [] : data;
};


// Set the todo list.
const setToDoList = (data) => {
  try {
    localStorage.setItem('todo', JSON.stringify(data));
  } catch (e) {
    fallback = data;
  }
};


// Add a task to the todo list.
const addToDo = () => { 
  const array = getToDoList();
  array.push({value: $e("#task").value, checked: false});
  setToDoList(array);
}; 


// Remove a task from the todo list.
const removeToDo = index => {
  const array = getToDoList();
  array.splice(index, 1);
  setToDoList(array);
};


// Allow for the ability to remove an item from the todo list & other stuff..
const dispatchListEvents = () => {
  document.querySelectorAll('#app ul li span').forEach(span => {
    span.onclick = () =>  {
      removeToDo(span.parentElement.getAttribute('data-index'));
      render();
    }
  });
  
  document.querySelectorAll('#app ul li input').forEach(input => {
    input.onclick = () =>  {
      const array = getToDoList();
      const object = array[input.parentElement.getAttribute('data-index')];
      object.checked = ! object.checked;
      setToDoList(array);
      render();
    }
  });
};


// Render the todo list.
const render = () => {
  let index = 0;
  const template = item => `<li data-index="${index++}">` +
      `<input type="checkbox" ${item.checked ? 'checked' : ''} />` +
      `${item.value} <span>X</span></li>`;
  
  const re = new RegExp('</li>,', 'g'), replacement = '</li>';
  const html = `<ul>${getToDoList().map(i => template(i))}</ul>`;
  $e("#app").innerHTML = `${html.replace(re, replacement)}`;
  dispatchListEvents();
};


// Allow the user to add a task to the todo list.
const addToListClickHandler = () => {
  let result = $e("#task").value.replace(/\ /g, '').length > 0 ? addToDo() : null;
  $e("#task").value = null; // Always null as addToDo returns null.
  render();
};


// The function that will be fired when the DOM is ready.
const ready = () => {
  render(); // Initial render.
  $e("#addToList").addEventListener('click', addToListClickHandler);
};


// An insanely lazy implementation of $(document).ready.
const delay = 250;
const fakeOnReady = setTimeout(ready, delay);

body {
  font-family: Arial, Helvetica, sans-serif;
}

#app ul li {
  max-width: 150px;
}

#app ul li span {
  float: right;
  color: red;
}

#app ul li span:hover {
  cursor: pointer;
}

<h1>To Do List</h1>

<section>
  <h2>Add Task</h2>
  <input id="task" placeholder="Task..."/>
  <input type="button" id="addToList" value="Add"/>
</section>

<hr/>

<section>
  <h2>Tasks</h2>
  <div id="app">
    <!-- Area for the DHTML. -->
  </div>
</section>