Question

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

使用下面的“主要代码”，该项目将添加到localStorage并设置为“rsvp”，但在刷新页面之前，可见列表不会更新。我每次点击提交按钮时都需要更新。我试过添加

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

正下方

console.log(rsvp);

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

例如，如果我输入'Test'，点击提交，输入'Test2'，点击提交然后输入'Test3'并再次点击提交 - 列表没有明显更新，你在控制台出错说'未捕获的DOMException：无法在'Element'上设置'outerHTML'属性：此元素没有父节点。'，在刷新页面之前，列表永远不会更新，键入其他名称并单击提交。同样，如果执行此操作，则在重复相同的过程之前，列表不会更新。

主要代码（没有 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 = '';
         }
     }

 });

});

Answer 1

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

在DOMContentLoaded事件处理程序

中调用

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

在.addEventListener()之后立即调用

;此问题的代码也没有说明调用localStorage.getItem('rsvp')之前const rsvp = JSON.parse(localStorage.getItem('rsvp'))的设置位置。

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

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

1 个答案: