在网页重新加载时保持页面的状态可以通过以下几种方法实现：

1. 使用Session Storage 或 Local Storage：在页面加载和卸载时，将页面的状态保存到Session Storage 或 Local Storage 中，然后在页面重新加载时，从Storage 中获取并恢复页面的状态。

// 保存状态
window.addEventListener('beforeunload', function() {
  var formValue = document.getElementById('myForm').value; // 示例：保存表单的值
  sessionStorage.setItem('formValue', formValue);
});

// 恢复状态
window.addEventListener('DOMContentLoaded', function() {
  var formValue = sessionStorage.getItem('formValue'); // 获取保存的表单值
  if (formValue) {
    document.getElementById('myForm').value = formValue; // 示例：恢复表单的值
  }
});

2. 使用URL 参数：在页面加载和卸载时，将页面的状态编码为URL 参数的一部分，然后在页面重新加载时，从URL 参数中获取并恢复页面的状态。

// 保存状态
window.addEventListener('beforeunload', function() {
  var formValue = document.getElementById('myForm').value; // 示例：保存表单的值
  var url = new URL(window.location.href);
  url.searchParams.set('formValue', formValue);
  window.location.href = url.href;
});

// 恢复状态
window.addEventListener('DOMContentLoaded', function() {
  var url = new URL(window.location.href);
  var formValue = url.searchParams.get('formValue'); // 获取保存的表单值
  if (formValue) {
    document.getElementById('myForm').value = formValue; // 示例：恢复表单的值
  }
});

3. 使用 Ajax 或 Fetch：在页面重新加载时，使用 Ajax 或 Fetch 发起一个异步请求，获取页面的状态数据，然后根据数据恢复页面的状态。

// 保存状态
window.addEventListener('beforeunload', function() {
  var formValue = document.getElementById('myForm').value; // 示例：保存表单的值
  // 发起异步请求保存状态
  fetch('/save-state', {
    method: 'POST',
    body: JSON.stringify({ formValue: formValue }),
    headers: {
      'Content-Type': 'application/json'
    }
  });
});

// 恢复状态
window.addEventListener('DOMContentLoaded', function() {
  // 发起异步请求获取状态数据
  fetch('/get-state')
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      var formValue = data.formValue; // 获取保存的表单值
      if (formValue) {
        document.getElementById('myForm').value = formValue; // 示例：恢复表单的值
      }
    });
});

请注意，这些示例代码仅是为了说明概念，并不能直接运行。您需要根据实际情况进行适当的调整和修改。