如何利用浏览器LocalStorage加载data.json实现页面数据持久化？

你遇到的核心问题是静态导入的data.json是页面加载时就固定的，无法动态替换为LocalStorage中的数据，需要把数据加载逻辑改成动态判断优先读取LocalStorage，无有效数据时再加载本地文件的方式，具体步骤如下：

1. 替换静态导入为动态数据获取函数 #

删掉原来的静态导入语句：

// 移除这行静态导入
import data from "./data.json" assert { type: "json" };

替换为异步函数实现动态数据获取逻辑：

async function getData() {
  // 优先读取LocalStorage中保存的数据
  const savedDataStr = localStorage.getItem("Data");
  if (savedDataStr) {
    try {
      return JSON.parse(savedDataStr);
    } catch (err) {
      console.error("LocalStorage数据格式损坏，将使用默认数据", err);
    }
  }

  // 无有效保存数据时，加载本地data.json
  const res = await fetch("./data.json");
  const defaultData = await res.json();
  
  // 可选：将默认数据存入LocalStorage，避免重复请求
  localStorage.setItem("Data", JSON.stringify(defaultData));
  
  return defaultData;
}

2. 页面初始化时加载数据并渲染UI #

在页面加载完成后调用上述函数，获取数据后初始化你的UI：

// 应用初始化函数
async function initApp() {
  const data = await getData();
  // 替换为你原本的UI更新逻辑，用获取到的数据渲染页面
  updateUI(data);
}

// 页面DOM加载完成后执行初始化
document.addEventListener("DOMContentLoaded", initApp);

3. 保留原有数据更新同步逻辑 #

确保每次修改数据后，依然执行以下代码将最新数据同步到LocalStorage：

// 数据修改完成后执行
localStorage.setItem("Data", JSON.stringify(updatedData));

关键说明 #

• 不存在类似静态import的方式直接从LocalStorage加载数据：import是模块加载语法，用于读取本地文件或远程模块；LocalStorage是浏览器运行时存储，必须通过localStorage.getItem()在运行时读取。
• 必须处理JSON解析异常：LocalStorage中的数据可能因意外情况损坏，解析失败时要降级到默认数据，避免页面崩溃。

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