ウィンドウがリロードされたときにlocalStorageデータが表示されない

Question

モックアップRSVPアプリケーションを構築していて、ページが更新されるときにlocalStorageデータが表示されない。私は名前を挿入することができ、その名前を招待リストに追加することを目指しています。次に、ユーザーは複数の名前に対してこれらの手順を繰り返したり、リスト内の名前を編集したりすることができます。私はこの部分を削除しましたが、ページを更新すると、招待された人は入力バーの下のリストに表示されなくなりました。私はそれがリストに名前を保持するところにそれを必要とし、リスト項目のボタン（編集、削除）は引き続き機能します。

下記の「メインコード」では、アイテムはlocalStorageに追加され、 'rsvp'として設定されますが、ページを更新するまで表示リストは更新されません。送信ボタンを押すたびに更新する必要があります。私は右の

console.log(rsvp); 

以下

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

を追加しようとしているが、私が提出クリックすると、リストが更新され、コンソールにあなたがアプリを使用する前の時間をロードされたデータを参照してくださいされていません。

たとえば、「Test」と入力してSubmitをクリックし、「Test2」と入力してsubmitをクリックし、「Test3」と入力してもう一度submitをクリックします。リストは目に見えないほど更新されません。 'Uncaught DOMException：' element 'に' outerHTML 'プロパティを設定できませんでした：この要素には親ノードがありません。'、ページを最新表示し、別の名前を入力してsubmitをクリックするまでリストは更新されません。繰り返しますが、これを行うと、同じプロセスを繰り返すまでリストは更新されません。

メインコード（ハンドラ内のステートメント 'が' RSVPなし）

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()を次と呼ばれます。 Questionのコードでは、const rsvp = JSON.parse(localStorage.getItem('rsvp'))が呼び出される前にlocalStorage.getItem('rsvp')が設定されている場所は示されません。あなたがチェックすることができ

はrsvpを定義する前に、キー"rsvp"性を有し、DOMContentLoadedイベントハンドラでif条件と文を使用しlocalStorageです。