How to make a web app retain information?

Ok... so a user enters info into the journal field and hits submit, and a function gets called on the information they have submitted, which I call changeTextComment(). That function calls another function and so on as the info is formatted and placed in the cue, as in a Facebook commentary.

I need this information saved so it can be recalled later, in local storage, making the app not refresh every time I restart it. So...

<script>
function appCache() {
// Check browser support
// this is experimental for local storage... 
more here:    http://ift.tt/UPk8Q4

if (typeof(Storage) != "undefined") {
     localStorage.setItem(para);
            // Retrieve
            document.getElementById("journal").innerHTML = localStorage.getItem(para);
        } else {
            document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
        };
        </script>

So looking at the appCache function it seems like it might work except I need to identify what the key variable is that will be stored and then retrieved.

I think this is the variable userInput, as any time the user hits the 'add to journal' button this variable is used to store the user input and then put into the changeTextComment() function.

I am wondering if this is the simplest way to deal with this whole thing... I do not yet understand databases, but wondering if that would be easier to learn.

In this case, I would add the function Appcache() to the function changeText() such that it caches the variable and then how would I set it up to then feed the value of the variable's cached info into changeText() upon launch of the app?

Every submission to the journal will have a unique value.

Heres the ChangeTextComment() Function... still sorting out how to use classes in css to simplify these functions:

function changeTextComment(){ 
// to be modified from the above to change the location of the dump
var userInput = document.getElementById('userInput').value;  
// get the input from the user
var panel = document.createElement("div");  // create a parent divider for everything




// assignment of attributes
panel.setAttribute("class","panel panel-default panel-body");  
panel.setAttribute("id","panelBody");  
var para = document.createElement("P");
var t = document.createTextNode(userInput);
para.appendChild(t);  

// add comment area
var c = document.createElement("INPUT");
c.setAttribute("type", "text");
c.setAttribute("id", "comment");
c.setAttribute("placeholder", "comment here");
c.setAttribute("class", "form-control input-lg");

// add comment button attempt -- success <> now try to put it in the textarea
var d = document.createElement("INPUT");
d.setAttribute("type","button");
d.setAttribute("class","btn btn-info active pull-right");
d.setAttribute("onclick","commentThis()");
d.setAttribute("value","Add Comment");
panel.appendChild(para);  // this is where a comments piece would go


// place the item
var destination = document.getElementById("journal")
//destination.insertBefore(Commentaryarea, destination.firstChild);
//destination.insertBefore(panel, destination.firstChild);
destination.insertBefore(panel, destination.firstChild);
panel.appendChild(c);
panel.appendChild(d);

document.getElementById("userInput").value = "";
document.getElementById("userInput").focus();}
</script>

<script>
function setText(a){
    document.getElementById("userInput").value = a
    document.getElementById("userInput").focus();
}
</script>