Retaining the value of createElement and inputted values even after refresh

Hello as said in the title, i am trying to find a way to keep the createElement("p") with its stored value which is in a local storage Array, Created in the ID "content". to still be shown on the page even after i press refresh.

The purpose of this code is to make a activity feed or like a message bulletin? (More like twitter)

But purely done using Javascript and placing the content in sequence of the array.

New "Post" on the top, Older post at the bottom. On every click

<div class="tweet-box">
<textarea id="tweet-input" placeholder="What's on your mind?" maxlength="320"></textarea>
<button type="button" class="post" style="float:right;" onclick="getTextinput()">Post</button>
<span class="danger">320</span>

</div>
</div>



<div class="w3-container w3-teal">
<div class="story-box">
<div class="avatar-container"><img src="images/Andi.jpg" alt="Avatar" class="avatar"></div>

<div id="content">

</div>
</div>
</div>

<script>
document.addEventListener("DOMContentLoaded", createStoryDatabase);
var StoryDatabase;

function createStoryDatabase() {

StoryDatabase = localStorage.getItem("StoryDatabase");

if (StoryDatabase == null) {
StoryDatabase = ;
} else {
StoryDatabase = JSON.parse(StoryDatabase);
}
}

//Function that gets Text input & prints out to a P
function post() {
getTextinput
}

function getTextinput() {
//Gets data or input from text Area
var inputText = document.getElementById('tweet-input').value;

var objText = {
"tweet-input": inputText
};

StoryDatabase.push(objText);
localStorage.setItem("StoryDatabase", JSON.stringify(StoryDatabase));

//to print out the input of user into <p>
var Node = document.createElement("p");

Node.innerHTML = inputText;

document.getElementById("content").appendChild(Node);


}

function displayAll() {

var obj = localStorage["StoryDatabase"];

if (obj != null) {
obj = JSON.parse(obj);
for (var i = 0; i < obj.length; i++) {
var textBefore = obj[i].tweet - input;
var Node = document.createElement("p");

Node.innerHTML = textBefore;
document.getElementById("content").appendChild(Node);
}
}
}

</script>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.