画面遷移したときに前ページのチェックボックスの値を渡したい

food
<div class="food">
  <input type="checkbox" value='ライス'>ライス
  <input type="checkbox" value='パン'>パン
  <input type="checkbox" value='ケーキ'>ケーキ
</div>
drink
<div class="drink">
  <input type="checkbox" value='コーヒー'>コーヒー
  <input type="checkbox" value='紅茶'>紅茶
  <input type="checkbox" value='ミルク'>ミルク
</div>

<a href='./page2.html'>→ page2</a>

<script>
// アンロード直前にチェックボックスの状態をsessionStorageへ保存
window.addEventListener('beforeunload', () => {
  sessionStorage.setItem('checkList',
    JSON.stringify({
      food: [...document.querySelectorAll('.food input[type=checkbox]:checked')].map(e => e.value),
      drink: [...document.querySelectorAll('.drink input[type=checkbox]:checked')].map(e => e.value),
    })
  );
});

// 以下は必要に応じて
window.addEventListener('DOMContentLoaded', () => {
  // リロード時に各チェックボックスの状態をsessionStorageから復元
  const list = JSON.parse(sessionStorage.getItem('checkList'));
  [...document.querySelectorAll('.food input[type=checkbox]')].map(e => e.checked = list?.food?.includes(e.value));
  [...document.querySelectorAll('.drink input[type=checkbox]')].map(e => e.checked = list?.drink?.includes(e.value));
});
</script>

food
<div class="food">
</div>
drink
<div class="drink">
</div>

<script>
const list = JSON.parse(sessionStorage.getItem('checkList'));

document.querySelector('.food').textContent = list?.food?.join(', ') || '-';
document.querySelector('.drink').textContent = list?.drink?.join(', ') || '-';
</script>