使用JavaScript修改DOM后如何在页面重载时保留修改内容不丢失

你遇到的刷新丢失动态DOM的本质原因是：JavaScript仅修改了当前浏览器内存中的DOM树，页面刷新时浏览器会重新从服务端加载原始HTML文件，所有未固化存储的动态修改都会被重置。要实现内容不丢失，核心是把生成动态DOM的原始数据做持久化存储，页面初始化时读取存储的数据重新渲染对应DOM即可，以下是两种常见实现思路：

方案1：前端本地存储（适合单设备自用、不需要跨设备同步的场景） #

• 直接使用浏览器自带的localStorage做本地持久化，存储的内容不会随页面刷新、浏览器关闭丢失，除非用户手动清除浏览器缓存
• 操作步骤：
  • 每次用户提交新商品时，先将商品的ID、名称、型号、数量、图片资源（可转Base64存储，或上传后存资源路径）整理成结构化对象，统一存入一个商品列表数组
  • 将商品列表数组序列化为JSON字符串，存入localStorage的指定字段
  • 页面加载初始化阶段，优先读取localStorage中存储的商品列表数据，解析后遍历数组，复用你现有生成卡片DOM的逻辑，把所有历史商品的卡片批量插入页面
• 注意：你当前直接读取input[type=file]的value只能拿到浏览器伪装的fakepath，无法直接用于图片渲染，需要额外处理将选中的图片转为Base64或者上传到服务端存储后再存路径。

方案2：后端存储（适合多设备访问、数据需要永久保留的场景） #

你当前使用的是PHP环境，可以直接对接后端存储实现数据永久固化：

• 操作步骤：
  • 点击保存按钮时，先阻止表单的默认提交行为（避免页面直接刷新），将商品数据（包括上传的图片）通过AJAX/ Fetch请求提交给后端PHP接口
  • 后端接收到请求后，将上传的图片保存到服务器的静态资源目录，把商品的所有字段和图片的服务器访问路径一起存入数据库
  • 页面加载时，要么由PHP直接从数据库读取商品列表，渲染到初始HTML中；要么前端初始化时主动请求后端接口拉取商品列表数据，再动态生成DOM插入页面
  • 后续的商品修改、删除操作也同步调用后端接口更新数据库中的数据即可，刷新页面时数据从服务端读取，自然不会丢失。

额外注意：你当前的保存按钮是submit类型，默认点击会触发表单提交刷新页面，做异步提交时一定要先调用e.preventDefault()阻止默认行为，避免数据还没存储就被刷新重置。

内容的提问来源于stack exchange，提问作者Adalberto Granja Valencia