时间戳

首页 > 解决方案 > 如何在不同页面上显示来自本地存储的此信息

javascript - 如何在不同页面上显示来自本地存储的此信息

问题描述

这应该是一个提醒应用程序，它有一个输入页面来放置任务和一些信息，还有一个输出页面应该包含清单上的所有内容。我需要添加什么才能使信息转到输出页面？这是在本地存储项目的代码和 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);
});

标签： javascript

解决方案

使用 sessionStorage 而不是 localStorage

localStorage 和 sessionStorage 完成完全相同的事情并具有相同的 API，但使用 sessionStorage 数据只会持续到窗口或选项卡关闭

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);

推荐阅读