I'm a bit new to HTML and was wondering if someone could help me figure out how to do something I can't figure out!I followed the GeeksForGeeks tutorial on making an HTML guestbook and it works very well, with a tiny exception; when I refresh my page, all of the comments get cleared!
I'm not sure how to store the info that goes into the guestbook and save it somewhere so it stays. I was wondering if anybody might be able to help me figure that out! Thank you so much 
My code is largely the same as the linked tutorial, but I'll put a snippet of my index.html and script.js for posterity's sake
index:
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Guestbook</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>GuestBook</h1>
<form id="guestForm">
<div class="form-input">
<label for="name">Name:</label>
<input type="text"
id="name" name="name"
required>
</div>
<div class="form-input">
<label for="email">Email:</label>
<input type="tel"
id="email" name="email"
required>
</div>
<div class="form-input">
<label for="comment">
Comment
</label>
<input type="text"
id="comment" name="comment"
required>
</div>
<div class="btn"><button type="submit">
Add Guest
</button></div>
</form>
<div id="guestList"></div>
</div>
<script src="script.js"></script>
</body>
</html>
script:
CODE
const guestForm = document.getElementById('guestForm');
const guestList = document.getElementById('guestList');
guestForm.addEventListener('submit', function (e) {
e.preventDefault();
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const comment = document.getElementById('comment').value;
const guestCard = document.createElement('div');
guestCard.classList.add('guest-card');
guestCard.innerHTML = `
<h2>${name}</h2>
<p><strong>Email:</strong> ${email}</p>
<p><strong>Comment:</strong> ${comment}</p>`;
guestList.appendChild(guestCard);
guestForm.reset();
});
