如何在不同頁面上顯示來自本地存儲的此信息

Question

這應該是一個提醒應用程序，它有一個輸入頁面來放置任務和一些信息，還有一個 output 頁面應該包含清單上的所有內容。 我需要添加什么信息才能將 go 信息添加到 output 頁面？ 這是在本地存儲項目的代碼和 html

<form id="todoForm">
  <label for="ReminderInput">Reminder</label>
  <input class="u-full-width" type="text" id="ReminderInput">


  <label for="DateInput">Date</label>
  <input class="u-full-width" type="datetime-local" id="DateInput">


  <label for="InfoInput">Additional Information</label>
  <textarea class="u-full-width" type="text" placeholder="Remember to..."
            id="InfoInput"></textarea>
  <button type="button" id="btn" class="button-primary">Add Reminder</button>
</form>

let reminders = [];

const addReminders = (ev) => {
  ev.preventDefault();
  let reminder = {
    ReminderInput: document.getElementById("ReminderInput").value,
    DateInput: document.getElementById("DateInput").value,
    InfoInput: document.getElementById("InfoInput").value,
  };

  const arr = [reminder.ReminderInput, reminder.DateInput, reminder.InfoInput];

  localStorage.setItem("todoForm", JSON.stringify(arr));
  reminders.push([
    reminder.ReminderInput,
    reminder.DateInput,
    reminder.InfoInput,
  ]);
  localStorage.setItem("reminders", JSON.stringify(reminders));
};

document.addEventListener("DOMContentLoaded", () => {
  document.getElementById("btn").addEventListener("click", addReminders);
});

Answer 1

使用 sessionStorage 而不是 localStorage

localStorage 和 sessionStorage 完成完全相同的事情並具有相同的 API，但使用 sessionStorage 數據僅保留到 window 或選項卡關閉

sessionStorage.setItem('todoForm', JSON.stringify(arr))
reminders.push([reminder.ReminderInput, reminder.DateInput, reminder.InfoInput]);
sessionStorage.setItem("reminders", JSON.stringify(reminders));

要獲取上面的密鑰：

let todoForm = sessionStorage.getItem('todoForm');

let reminders = sessionStorage.getItem('reminders');

console.log(todoForm);
console.log(reminders);