ローカルストレージを使用してページリフレッシュ後にスパンと新しく作成された要素を保持する

Question

Javascriptのみを使用してコメントページを作成していますが、リフレッシュ後にコメントをページに保存する方法がわかりません。私はすべてのコメントを配列に格納し、その配列はローカルストレージに保存しましたが、リフレッシュ後にそれらをスパンに表示する方法がわかりません。また、私はちょうどローカルストレージに全体のスパンを格納することができ、それをそこに置くことができますか？

<script> 

var listofcomments = [] 

function action(){ 
    var comment = document.getElementById('header').value; 
    listofcomments.push(comment); 
    localStorage.setItem('commentstorage',listofcomments); 
    document.getElementById('header').value = " "; 
    var username = 'username:' 
    var para = document.createElement('P'); 
    para.innerHTML= username + comment + '<br>'; 
    document.getElementById('hello').appendChild(para); 

} 



</script> 


<textarea id='header' type='text' rows='6' cols='100' name='server'> 
</textarea> 
<input onclick="action(); " type="button" value='Comment'> 
<span id='hello'> 

</span> 

Answer 1

これは適切だと思います。すべてのデータをローカルストレージに格納し、オンロードすると、ローカルストレージからデータを復元します。

var listofcomments = localStorage.getItem('commentstorage');