In the absence of a database, you could try storing their progress within window.localStorage. On page load, you would need to run a function that checks for this item; if present, the function would then repopulate all of their information. After each submission, you would also need to update local storage so that their progress stays current.

Well, as people said earlier the if you want to load your data in all browsers regardless of where did those data came from, you should set up a database, based on your need and specification. Otherwise, you can get used to existing stuff in browsers such as localStorage. So you need to create a property in it, then on each page reload check whether there are data saved there or not with onload event.

So your final code should be something like this:

var txtDiv = document.getElementById("text-div")
var inputField = document.getElementById("input")
var items = [];

function createItem(item) {
  var p = document.createElement("p")
  var pNode = document.createTextNode(item)
  p.appendChild(pNode)
  txtDiv.appendChild(p)
}

window.onload = function() {
  if (window.localStorage.getItem("items") !== null) {
    items = JSON.parse(window.localStorage.getItem("items"))
    var itemsLength = items.length

    for (var i = 0; i < itemsLength; i++) {
      createItem(items[i])
    }
  }
}

function createEl() {
  if (inputField.value !== "") {
    createItem(inputField.value)
    items.push(inputField.value)
    window.localStorage.setItem("items", JSON.stringify(items))
  }
}

You will need to use some method of persistent storage. If you don’t care about saving the changes forever, then you can save user changes in localStorage. If you need to make sure the changes will always be available, then you’ll need to create a database and handle saving and loading data from an API that connects to it.

Here’s an example of how to do this using localStorage:

    var txtDiv = document.getElementById("text-div")
    var inputField = document.getElementById("input")

    const getSaved = () => JSON.parse(localStorage.getItem("saved"));

    function saveEl(val) {
        const saved = getSaved();
        let newInputArr = saved ? [...saved, val] : [val];
        localStorage.setItem("saved", JSON.stringify(newInputArr));
    }

    function createEl(val) {
        var p = document.createElement("p")
        var pNode = document.createTextNode(val)
        p.appendChild(pNode)
        txtDiv.appendChild(p)
    }

    function saveAndCreate() {
        if((inputField.value !== "")) {
            saveEl(inputField.value);
            createEl(inputField.value);
        }
    }

    const saved = getSaved();
    if(saved && saved.length) {
        saved.forEach((val) => {
            createEl(val)
        })
    }

So I’m making a web page where users can press buttons to add elements using appendChild but when they refresh the page it all goes away. Is there something I can do to save what the users add to the page so that when they refresh it it stays the same?

HTML:

<input type="text" id="input" placeholder="write anything here...">
<button id="submit" onclick="createEl()">Submit</button>
<div class="text-div" id="text-div"></div>

CSS:

#input {
  width: 500px;
  height: 50px;
  padding-left: 5px;
}

#submit {
  height: 55px;
}

JAVASCRIPT:

var txtDiv = document.getElementById("text-div")
var inputField = document.getElementById("input")

function createEl() {
   if (inputField.value !== "") {
      var p = document.createElement("p")
      var pNode = document.createTextNode(inputField.value)
      p.appendChild(pNode)
      txtDiv.appendChild(p)
}
}