如何用JS读取Planner.html内容并追加至ParentPortal.html？

要把Planner.html中用户添加的条目同步到ParentPortal.html，核心思路是利用浏览器的localStorage做跨页面数据持久化，再在父页面读取并渲染这些数据。下面是具体的实现步骤：

1. 改造PlannerScript.js：存储条目到localStorage #

首先，你需要修改添加/移除条目的函数，让它们不仅更新页面UI，还把数据保存到localStorage里，这样ParentPortal就能读取到这些数据了。

// PlannerScript.js

// 作业条目相关
function AddHome() {
  const entryText = prompt("Enter homework entry:");
  if (!entryText) return;

  // 读取现有条目，没有则初始化空数组
  let homeworkEntries = JSON.parse(localStorage.getItem("homeworkEntries")) || [];
  homeworkEntries.push(entryText);
  localStorage.setItem("homeworkEntries", JSON.stringify(homeworkEntries));

  // 更新页面UI
  const ul = document.getElementById("entrieshome");
  const li = document.createElement("li");
  li.textContent = entryText;
  ul.appendChild(li);
}

function RemoveEntryHome() {
  let homeworkEntries = JSON.parse(localStorage.getItem("homeworkEntries")) || [];
  if (homeworkEntries.length === 0) return;

  homeworkEntries.pop(); // 移除最后一个条目，若要移除指定条目可调整逻辑
  localStorage.setItem("homeworkEntries", JSON.stringify(homeworkEntries));

  // 更新页面UI
  const ul = document.getElementById("entrieshome");
  ul.removeChild(ul.lastElementChild);
}

// 测试条目相关
function AddTest() {
  const entryText = prompt("Enter test entry:");
  if (!entryText) return;

  let testEntries = JSON.parse(localStorage.getItem("testEntries")) || [];
  testEntries.push(entryText);
  localStorage.setItem("testEntries", JSON.stringify(testEntries));

  const ul = document.getElementById("entriestest");
  const li = document.createElement("li");
  li.textContent = entryText;
  ul.appendChild(li);
}

function RemoveEntryTest() {
  let testEntries = JSON.parse(localStorage.getItem("testEntries")) || [];
  if (testEntries.length === 0) return;

  testEntries.pop();
  localStorage.setItem("testEntries", JSON.stringify(testEntries));

  const ul = document.getElementById("entriestest");
  ul.removeChild(ul.lastElementChild);
}

// 学校作业条目相关
function AddSchool() {
  const entryText = prompt("Enter schoolwork entry:");
  if (!entryText) return;

  let schoolEntries = JSON.parse(localStorage.getItem("schoolworkEntries")) || [];
  schoolEntries.push(entryText);
  localStorage.setItem("schoolworkEntries", JSON.stringify(schoolEntries));

  const ul = document.getElementById("entriesschool");
  const li = document.createElement("li");
  li.textContent = entryText;
  ul.appendChild(li);
}

function RemoveEntrySchool() {
  let schoolEntries = JSON.parse(localStorage.getItem("schoolworkEntries")) || [];
  if (schoolEntries.length === 0) return;

  schoolEntries.pop();
  localStorage.setItem("schoolworkEntries", JSON.stringify(schoolEntries));

  const ul = document.getElementById("entriesschool");
  ul.removeChild(ul.lastElementChild);
}

// 确认条目函数：添加同步提示
function ApproveEntries() {
  alert("Entries approved and synced to parent portal!");
  // 触发storage事件，辅助Parent页面监听更新
  localStorage.setItem("lastSynced", Date.now());
}

2. 创建ParentPortal.html页面 #

这个页面用来展示同步过来的条目，结构简洁明了：

<!DOCTYPE html>
<html>
<head>
  <title>Parent Portal</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>Your Child's Planner Entries</h1>
  <!-- 用来渲染同步内容的容器 -->
  <div id="plannerContent"></div>
  <script src="ParentScript.js"></script>
</body>
</html>

3. 编写ParentScript.js：读取并渲染数据 #

这个脚本负责从localStorage读取数据，然后渲染到ParentPortal页面上，还可以监听数据变化实现实时更新。

// ParentScript.js

// 渲染所有规划条目到页面
function renderPlannerEntries() {
  const container = document.getElementById("plannerContent");
  container.innerHTML = ""; // 清空现有内容

  // 渲染作业条目
  const homeworkEntries = JSON.parse(localStorage.getItem("homeworkEntries")) || [];
  if (homeworkEntries.length > 0) {
    const homeworkSection = document.createElement("section");
    homeworkSection.innerHTML = `
      <h2>Homework</h2>
      <ul>${homeworkEntries.map(entry => `<li>${entry}</li>`).join('')}</ul>
    `;
    container.appendChild(homeworkSection);
  }

  // 渲染测试条目
  const testEntries = JSON.parse(localStorage.getItem("testEntries")) || [];
  if (testEntries.length > 0) {
    const testSection = document.createElement("section");
    testSection.innerHTML = `
      <h2>Tests</h2>
      <ul>${testEntries.map(entry => `<li>${entry}</li>`).join('')}</ul>
    `;
    container.appendChild(testSection);
  }

  // 渲染学校作业条目
  const schoolEntries = JSON.parse(localStorage.getItem("schoolworkEntries")) || [];
  if (schoolEntries.length > 0) {
    const schoolSection = document.createElement("section");
    schoolSection.innerHTML = `
      <h2>Assignments/Schoolwork</h2>
      <ul>${schoolEntries.map(entry => `<li>${entry}</li>`).join('')}</ul>
    `;
    container.appendChild(schoolSection);
  }

  // 没有条目时显示提示
  if (homeworkEntries.length === 0 && testEntries.length === 0 && schoolEntries.length === 0) {
    container.textContent = "No approved planner entries yet.";
  }
}

// 页面加载时立即渲染数据
window.addEventListener("load", renderPlannerEntries);

// 监听storage事件：当Planner页面修改数据时，自动刷新Parent页面
window.addEventListener("storage", (e) => {
  // 只在目标数据变化时刷新
  if (["homeworkEntries", "testEntries", "schoolworkEntries", "lastSynced"].includes(e.key)) {
    renderPlannerEntries();
  }
});

关键注意事项 #

• 同源限制：localStorage受同源策略限制，所以两个页面必须在同一个域名（包括端口）下。本地测试时，建议用Live Server这类工具启动本地服务器，不要直接打开file://协议的文件（部分浏览器会限制跨页面的localStorage访问）。
• 数据持久化：localStorage里的数据会一直保留，直到用户手动清除浏览器缓存，或者你在代码里调用localStorage.removeItem()删除。
• 扩展功能：如果需要更复杂的同步（比如多设备同步），可能需要后端服务器配合，但对于本地单设备场景，localStorage完全够用。

内容的提问来源于stack exchange，提问作者CodeMaster