Accessing the value in the key value pair of localStorage.recentSearches.

const mainDiv = document.querySelector('.main');
const ul = document.getElementById('invitedList');

const div = document.createElement('div');
const filterLabel = document.createElement('label');
const filterCheckBox = document.createElement('input');

const clearButton = document.getElementById('clearStorage');

filterLabel.textContent = "Hide those who haven't responded";
filterCheckBox.type = 'checkbox';
div.appendChild(filterLabel);
div.appendChild(filterCheckBox);
mainDiv.insertBefore(div, ul);

// Filtering your checkbox
filterCheckBox.addEventListener('change', (e) => {
  const isChecked = e.target.checked;
  const lis = ul.children;
  if (isChecked) {
    for (let i = 0; i < lis.length; i++) {
      let li = lis[i];
      if (li.className === 'responded') {
        li.style.display = '';
      } else {
        li.style.display = 'none';
      }
    }
  } else {
    for (let i = 0; i < lis.length; i++) {
      let li = lis[i];
      li.style.display = "";
    }
  }
});

//Create LI elements with name, buttons, and checkbox
const createLI = text => {

  function createElement(elementName, property, value) {
    const element = document.createElement(elementName);
    element[property] = value;
    return element;
  }

  function appendToLI(elementName, property, value) {
    const element = createElement(elementName, property, value);
    li.appendChild(element);
    return element;
  }

  const li = document.createElement('li');
  appendToLI('span', 'textContent', text);
  // Refactoring below
  // const span = document.createElement('span');
  // span.textContent = text;
  // li.appendChild(span);
  appendToLI('label', 'textContent', 'Confirmed')
    .appendChild(createElement('input', 'type', 'checkbox'));
  appendToLI('button', 'textContent', 'edit');
  appendToLI('button', 'textContent', 'remove');
  ul.append(li);
}

//================ Local Storage ================== //

function supportsLocalStorage() {
  try {
    return 'localStorage' in window && window['localStorage'] !== null
  } catch(e) {
    return false;
  }
}

function getRecentSearches() {
  let searches = localStorage.getItem('recentSearches');
  if (searches) {
    return JSON.parse(searches);
  }
  return [];
}

function saveSearchString(str) {
  let searches = getRecentSearches();
  if (!str || searches.indexOf(str) > -1) {
    return false;
  }
  searches.push(str);
  localStorage.setItem('recentSearches', JSON.stringify(searches));
  return true;
}

function removeSearches() {
  localStorage.removeItem('recentSearches')
}

function clearList(listElement) {
  listElement.innerHTML = '';
}

if(supportsLocalStorage) {
  let recentSearches = getRecentSearches();
  recentSearches.forEach(function(searchString){
    createLI(searchString);
  });

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const text = input.value;
    input.value = "";
    if (saveSearchString(text)) {
       const li = createLI(text);
    }
  })

  //e holds the event object. It's a reference to the object that dispatched the event
  //'change' is a change of state when the checkbox is clicked or unclicked
  ul.addEventListener('change', (e) => {
    const checkbox = event.target;
    //checked will be true if checked or false if not checked
    const checked = checkbox.checked;
    const listItem = checkbox.parentNode.parentNode;

    if(checked) {
      listItem.className = 'responded';
    } else {
      listItem.className = '';
    }
  });

  ul.addEventListener('click', (e) => {
    // since click events can be triggered through all the children of ul, we need to filter just for a button click on ul
    if (e.target.tagName === "BUTTON") {
      const button = e.target;
      const li = button.parentNode;
      const ul = li.parentNode;
      const action = button.textContent;
      const span = li.firstElementChild;

      const nameActions = {
        remove : () => {
          ul.removeChild(li);
          removeSearchItem(recentSearches, span);
        },
        edit: () => {
          const span = li.firstElementChild;
          const input = document.createElement("input");
          input.type = "text";
          input.value = span.textContent;
          li.insertBefore(input, span);
          li.removeChild(span);
          button.textContent = "save";
        },
        save: () => {
          const input = li.firstElementChild;
          const span = document.createElement("span");
          span.textContent = input.value;
          li.insertBefore(span, input);
          li.removeChild(input);
          button.textContent = "edit";
        }
      }
      //select and run action in button's name
      nameActions[action]();
      // actions will either be remove, edit or save, so when we click on a button, it will either remove, edit or save.
      //name of the buttons match the name of the properties, so it works out.
      // dont need the if/else statement, nameActions[action]() replaces the if/else statement
      // if (action === "remove") {
      //   nameActions.remove();
      // } else if (action === "edit") {
      //   nameActions.edit();
      // } else if (action === "save") {
      //   nameActions.save();
      // }
    }
  });

  clearButton.addEventListener('click', function(event){
    removeSearches();
    clearList(ul);
    console.log('local storage has been cleared.');
  })
}

<header>
  <h1>RSVP</h1>
  <p>A Treehouse App</p>
  <form id="registrar">
    <input type="text" name="name" placeholder="Invite Someone">
    <button type="submit" name="submit" value="submit">Submit</button>
  </form>
</header>

<div class="main">
  <h2>Invitees</h2>
  <h2>Invitees</h2>
  <ul id="invitedList"></ul>
</div>

<button class="button" type="button" id="clearStorage">Clear Storage</button>