localStorage存储表单数据正常，另一页面表格无法显示问题排查

问题概述 #

表单页面可正常将数据存入localStorage，但目标页面无法将数据渲染到表格中，核心问题集中在getData函数及相关逻辑上。

关键错误点 #

1. localStorage键名不匹配 #

表单页面存储数据时使用的键为"Food"：

// 表单页面saveData函数
localStorage.setItem("Food", stringifiedData);

但目标页面getData函数错误地使用"stringifiedData"作为键获取数据：

// 目标页面原getData函数错误代码
let retrivedData = localStorage.getItem("stringifiedData");

这直接导致获取到的数据为null，后续解析、实例化逻辑完全不执行，表格自然无数据。

2. 未还原存储的ID属性 #

存储到localStorage的食物对象包含生成的id属性，但目标页面创建新food实例时，未直接复用存储的id，而是依赖fID()方法重新生成随机ID，不仅会导致ID与存储值不一致，若未调用fID()还会导致渲染时ID字段为空。

修正后的目标页面JS代码 #

"use strict";

const fdTable = document.getElementById('fTable');
const tableHead = document.getElementById('hdrTable');
var allFood = [];

function food(foodName, foodType, price) {
  this.foodName = foodName;
  this.foodType = foodType;
  this.price = price;
  allFood.push(this);
}
food.prototype.fID = function () {
  this.id = Math.floor(1111 + Math.random() * 9999);
};

table();

function table() {
  let headerID = document.createElement("th");
  headerID.textContent = "ID";

  let headerName = document.createElement("th");
  headerName.textContent = "Food Name";

  let headerType = document.createElement("th");
  headerType.textContent = "Type of Food";

  let headerPrice = document.createElement("th");
  headerPrice.textContent = "price";

  hdrTable.appendChild(headerID);
  hdrTable.appendChild(headerName);
  hdrTable.appendChild(headerType);
  hdrTable.appendChild(headerPrice);
}

food.prototype.Render = function () {
  let row = document.createElement("tr");
  let id = document.createElement("td");
  let name = document.createElement("td");
  let type = document.createElement("td");
  let price = document.createElement("td");

  id.textContent = this.id;
  name.textContent = this.foodName;
  type.textContent = this.foodType;
  price.textContent = this.price;

  row.appendChild(id);
  row.appendChild(name);
  row.appendChild(type);
  row.appendChild(price);

  fTable.appendChild(row);
};

getData();

function getData(){
  // 修正：使用与存储一致的键名"Food"
  let retrivedData = localStorage.getItem("Food");
  let parsedData = JSON.parse(retrivedData);
  
  if(parsedData != null){
    allFood = []; // 清空原有数据，避免重复渲染
    for (let i = 0; i < parsedData.length; i++) {
      let foodItem = parsedData[i];
      // 创建实例并直接赋值存储的ID，无需重新生成
      let newFoodOP = new food(foodItem.foodName, foodItem.foodType, foodItem.price);
      newFoodOP.id = foodItem.id;
      // 实例化后立即渲染
      newFoodOP.Render();
    }
  }
  console.log(allFood);
}

额外优化建议（表单页面） #

表单页面刷新后allFood会被重置为空，导致新提交的数据覆盖原有存储，建议在表单页面初始化时加载已有数据：

// 表单页面JS开头添加
function loadData() {
  let savedData = localStorage.getItem("Food");
  if(savedData) {
    allFood = JSON.parse(savedData);
  }
}
loadData();

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