使用本地存储刷新页面后保留跨度和新创建的元素

Question

I'm making a comment page using only javascript and no JQuery but I don't know how to go about keeping the comments on the page after it's refreshed. I've stored every comment in an array and that array in local storage but I don't know how to make them appear in the span after the refresh. Also, I was wondering if I could just store the whole span in local storage and onload put it back there?

<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

I think that would be proper. If you store all the data in local storage and at onload you restore data from local storage.

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