<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SwinTech</title>
</head>
<body>
<form action="apply.html" method="post">
<div class="consultantinformation">
<h2> Job reference number: </h2>
<br>
<h4 id="jobreference2"> 6LZ9W </h4>
</div>
<button id="submitbutton">Submit</button>
</form>
<script>
document.getElementById("submitbutton").addEventListener("click", setItem);
localStorage.setItem("jobreference1", "1FN43");
</script>
</body>
</html>I'm trying to transfer "jobreference1" from the 1st snippet to the 2nd using local storage. As you can see, I've stored it in one external JavaScript file and sent it to another. But when I try to call it in the HTML code in the 2nd snippet, to which the value was transferred to, it simply doesn't work. I've decided to include all of my HTML and JavaScript code for my second snippet because I believe that's where the issue lies. Thank you.
Note: no Inline JavaScript or jQuery.
This is a working example. The index.html sets the reference on page load. The form submit redirects to apply.html and it reads the correct value at page load.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SwinTech</title>
</head>
<body>
<form action="apply.html" method="post">
<div class="consultantinformation">
<h2> Job reference number: </h2>
<br>
<h4 id="jobreference2"> 6LZ9W </h4>
</div>
<button>Submit</button>
</form>
<script>
localStorage.setItem("jobreference1", "1FN43");
</script>
</body>
</html>
apply.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>Job Reference Number: <span id="job1"></span></p>
<script>
document.getElementById("job1").innerHTML = localStorage.getItem("jobreference1");
</script>
</body>
</html>