li element vanish after page reload

Question

I am trying to add a li element in the below div (Functionality is to upload an attachment) See below pic 1 My JavaScript functionality of Submit button adds the Li in the div perfectly fine. But, when I refresh the page it's gone.

<input type="file" id="real-file" hidden="hidden" />
<button type="button" id="custom-button">CHOOSE A FILE</button>
<span id="custom-text">No file chosen, yet.</span>
<button type="button" id="submit-button" onclick="Submit()">Submit</button>

<div id="collapseThree">

</div>

<script>
  const realFileBtn = document.getElementById("real-file");
  const customBtn = document.getElementById("custom-button");
  const customTxt = document.getElementById("custom-text");
  const submitBtn = document.getElementById("submit-button");

  const slides = [];
  var str = '';


  customBtn.addEventListener("click", function() {
    realFileBtn.click();
  });


  window.addEventListener('load', (event) => {
    console.log(slides)
    console.log('The page has fully loaded yo');
    // document.getElementById("collapseThree").innerHTML
  });
  /*  window.onload = document.getElementById("slideContainer").innerHTML
   */


  function Submit() {
    console.log("going in");
    document.getElementById("collapseThree").innerHTML += str
  }

  realFileBtn.addEventListener("change", function() {
    if (realFileBtn.value) {
      customTxt.innerHTML = realFileBtn.value.match(
        /[\/\\]([\w\d\s\.\-\(\)]+)$/
      )[1];

      console.log(customTxt.innerHTML)
      slides.push(customTxt.innerHTML);

      slides.forEach(function(slide) {
        str = '<li><a href="/ec/Documents/' + slide + '">' + slide + '</a></li>';
      });
      console.log(arr)
      console.log(slides)
    } else {
      customTxt.innerHTML = "No file chosen, yet.";
    }
  });
</script>

Answer 1

You can use localStorage to save and read data. Simply call

function getSlides() {
  var slidesJson = localStorage.getItem('slides') || '[]';
  return JSON.parse(slidesJson);
}

to get all current slides and

function setSlides(slides) {
  localStorage.setItem('slides', JSON.stringify(slides))
}

to save the current state of the array.