点击「稍后保存」按钮后，页面无法展示已保存项的技术问题

核心问题分析 #

• 选择器错误：document.querySelector("displayItems") 未添加类选择器前缀 .，导致无法定位到目标DOM元素
• 数组依赖问题：展示函数依赖外部传入的arr，但页面加载时全局数组可能未正确初始化，应该直接读取localStorage中的最新数据
• 全局数组初始化缺失：两个页面都需要先初始化保存数组，避免首次操作时数组为undefined

修正后的代码 #

1. 全局数组初始化（两个页面都需添加这段JS）

// 优先从localStorage读取已保存数据，无数据则初始化为空数组
let SaveForLaterArray = JSON.parse(localStorage.getItem("SaveForLaterArray")) || [];

2. 修复保存函数（修正拼写错误）

function carsForLater(arr) {
    let nameOfCar = prompt("请输入要保存的项目名称");
    let description = prompt("请输入要保存的项目描述");

    const newObj = { Name: nameOfCar, Description: description };
    arr.push(newObj);

    localStorage.setItem("SaveForLaterArray", JSON.stringify(arr));
    alert(`你已保存 ${arr.length} 个项目`);
}

3. 修复展示函数（核心修正）

function displaySavedForLater() {
    // 读取localStorage中的最新保存数据
    let savedItems = JSON.parse(localStorage.getItem("SaveForLaterArray")) || [];
    // 修正类选择器，添加前缀.
    let displayArea = document.querySelector(".displayItems");
    // 清空展示区域，避免重复渲染
    displayArea.innerHTML = "";

    savedItems.forEach((item) => {
        let newDiv = document.createElement("div");
        let displaySavedItems = document.createElement("p");
        displaySavedItems.textContent = `${item.Name}: ${item.Description}`;
        newDiv.appendChild(displaySavedItems);
        displayArea.appendChild(newDiv);
    });
}

4. 修正HTML部分

<!-- 首页保存按钮 -->
<button type="button" id="Foxbody" onclick="carsForLater(SaveForLaterArray)">保存</button>

<!-- 稍后保存页面 -->
<body onload="displaySavedForLater()">
    <div class="row">
        <div class="displayItems"></div>
    </div>
</body>

额外说明 #

• 清空展示区域：每次渲染前用innerHTML = ""清空容器，避免重复添加相同内容
• 拼写修正：将decription改为description，避免变量名混乱
• 函数解耦：展示函数不再依赖外部数组，直接读取localStorage数据，逻辑更独立可靠

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