Javascript 本地存储数据在窗口重新加载时不显示

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

使用下面的“主代码”，该项被添加到本地存储并设置为“rsvp”，但在我刷新页面之前，可见列表不会更新。我需要它更新，每次我点击提交按钮。我试着添加

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

就在下面

console.log(rsvp);

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

例如，如果我键入'Test'，单击submit，键入'Test2'，单击submit，然后键入'Test3'，然后再次单击submit-列表没有明显更新，您会在控制台中看到一个错误，提示'Uncaught DOMException:未能在'Element'上设置'outerHTML'属性：此元素没有父节点'，在刷新页面、键入其他名称并单击“提交”之前，列表将永远不会更新。同样，如果您这样做，列表不会更新，直到您重复相同的过程

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

document.addEventListener（'DOMContentLoaded'，（）=>{
const form=document.getElementById（'register'）；
常量输入=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=“隐藏未响应的用户”；
filterCheckbox.type='checkbox'；
子类（过滤器标签）；
子分区（过滤器检查盒）；
主分区插入前（分区，ul）；
//为RSVP列表创建列表项
函数createLI（文本）{
函数createElement（elementName、属性、值）{
常量元素=document.createElement（elementName）；
元素[属性]=值；
返回元素；
}
函数appendToLI（元素名、属性、值）{
常量元素=createElement（elementName、属性、值）；
li.子元素（元素）；
返回元素；
}
const li=document.createElement（'li'）；
附录i（'span'，'textContent'，text）；
appendToLI（'label'、'textContent'、'Confirm'）
.appendChild（createElement（'input'，'type'，'checkbox'）；
appendToLI（'按钮'，'文本内容'，'编辑'）；
appendToLI（'button'、'textContent'、'remove'）；
返回李；
}
表格.addEventListener（'submit'，（e）=>{
e、 预防默认值（）；
常量文本=input.value；
input.value=''；
//检查输入区域中是否有空字符串
如果（文本==''）{
警报（“您尚未输入名称，请重试。”）；
返回；
}
//检查重复的名称
对于（i=0；i{
const checkbox=event.target；
const checked=checkbox.checked；
const label=checkbox.parentNode；
const listItem=checkbox.parentNode.parentNode；
如果（选中）{
listItem.className='已响应'；
label.childNodes[0].textContent='Confirmed'；
}否则{
listItem.className=''；
label.childNodes[0]。textContent='Confirm'；
}
});
ul.addEventListener（'点击'，（e）=>{
如果（e.target.tagName===‘按钮’）{
常数按钮=e.目标；
const li=button.parentNode；
const ul=li.parentNode；
const action=button.textContent；
常量nameActions={
删除：（）=>{
ul.removeChild（李）；
},
编辑：（）=>{
常量span=li.firstElementChild；
常量输入=document.createElement（'input'）；
input.type='text'；
input.value=span.textContent；
li.insertBefore（输入，跨度）；
李。removeChild（span）；
button.textContent='save'；
},
保存：（）=>{
常量输入=li.firstElementChild；
const span=document.createElement（'span'）；
span.textContent=input.value；
li.insertBefore（范围，输入）；
li.removeChild（输入）；
button.textContent='edit'；
}
};
//选择并以按钮的名称运行操作
命名动作[动作]（）；
}
});
//过滤掉那些还没有回应的人
filterCheckbox.addEventListener（'change'，（e）=>{
const isChecked=e.target.checked；
const-lis=ul.儿童；
如果（已检查）{
for（设i=0；idocument.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'))

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