javascript - 重新加载窗口时，localStorage数据不显示

我正在构建一个模拟RSVP应用程序，并且在页面刷新时无法显示localStorage数据。我的目标是能够插入名称，并将名称附加到邀请列表中。然后，用户可以为多个名称重复这些步骤，也可以编辑列表中的名称。我需要解决这一部分，但是如果要刷新页面，则被邀请者将不再位于输入栏下方的列表中。我需要它可以将名称保留在列表中，并且列表项上的按钮（编辑，删除）仍然可以使用。

使用下面的“主代码”，该项目将添加到localStorage并设置为“ rsvp”，但是直到我刷新页面后，可见列表才会更新。每当我点击“提交”按钮时，我都需要更新它。我尝试添加

if (rsvp != null) {
   ul.outerHTML = rsvp;
}

就在下面

console.log(rsvp);

但是当我单击“提交”时，该列表不会更新，并且在控制台中，您会看到上次使用该应用程序时加载的数据。

例如，如果我键入“测试”，单击提交，键入“ Test2”，单击提交，然后键入“ Test3”，然后再次单击提交-该列表未进行明显更新，则在控制台中显示错误：“未捕获DOMException：无法在'Element'上设置'outerHTML'属性：此元素没有父节点。'，并且直到刷新页面，键入其他名称并单击Submit之后，列表才会更新。同样，如果执行此操作，则直到重复相同的过程，列表才会更新。

主代码（处理程序中没有rsvp'if'语句）

document.addEventListener('DOMContentLoaded', () => {

 const form = document.getElementById('registrar');
 const input = form.querySelector('input');

 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');



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

 // Creates the list item for the RSVP list
 function 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);
     appendToLI('label','textContent', 'Confirm')
        .appendChild(createElement('input', 'type', 'checkbox'));
     appendToLI('button', 'textContent', 'edit');
     appendToLI('button', 'textContent', 'remove');
     return li;
 }


 form.addEventListener('submit', (e) => {
     e.preventDefault();
     const text = input.value;
     input.value = '';

     // Checks for empty string in the input area
     if (text === '') {
         alert("You have not entered a name, please try again.");
         return;
     }
     // Checks for duplicate names
     for (i = 0; i < ul.children.length; i++) {
         if (text === ul.children[i].children[0].textContent) {
             alert("This name has already been entered. Please enter a different name.");
             return;
         }
     }

     const li = createLI(text);
     ul.appendChild(li);

     localStorage.setItem('rsvp', JSON.stringify(ul.outerHTML));


 });

 const rsvp = JSON.parse(localStorage.getItem('rsvp'));
 if (rsvp != null) {
    ul.outerHTML = rsvp;
 }


 // Changes list item from confirm to confirmed
 ul.addEventListener('change', (e) => {
     const checkbox = event.target;
     const checked = checkbox.checked;
     const label = checkbox.parentNode;
     const listItem = checkbox.parentNode.parentNode;

     if (checked) {
         listItem.className = 'responded';
         label.childNodes[0].textContent = 'Confirmed';
     } else {
         listItem.className = '';
         label.childNodes[0].textContent = 'Confirm';
     }
 });


 ul.addEventListener('click', (e) => {
     if (e.target.tagName === 'BUTTON') {
         const button = e.target;
         const li = button.parentNode;
         const ul = li.parentNode;
         const action = button.textContent;
         const nameActions = {
             remove: () => {
                 ul.removeChild(li);
             },
             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]();
     }
 });

 // Filters out those who have not yet responded
 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 = '';
         }
     }

 });

});

最佳答案

const rsvp = JSON.parse(localStorage.getItem('rsvp'))

在DOMContentLoaded事件处理程序中调用

if (rsvp != null) {
  ul.outerHTML = rsvp;
}

在.addEventListener()之后立即调用；同样，Question中的代码也不会指示在调用localStorage.getItem('rsvp')之前在const rsvp = JSON.parse(localStorage.getItem('rsvp'))处设置的位置。

您可以在定义localStorage之前检查"rsvp"是否具有属性键rsvp，并在if事件处理程序中使用DOMContentLoaded条件和语句。

关于javascript - 重新加载窗口时，localStorage数据不显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46965124/