如何将upload.html表单数据写入data.html中id为proyects的div内

方案1：本地存储方案（纯静态无后端，零重构成本，推荐优先用） #

完全不需要改动现有HTML、CSS结构，只调整JS逻辑即可实现跨页面数据传递：

1. 修改upload.html引入的app.js，表单提交后把数据存入localStorage再跳转到data.html：

function getData() { 
  const nombreProyecto = document.getElementById("name").value;
  const descripcion = document.getElementById("message").value;
  const fileInput = document.querySelector('input[type="file"]');
  const file = fileInput.files[0];

  // 处理图片转base64存储，避免文件路径问题
  if (file) {
    const reader = new FileReader();
    reader.onload = function(e) {
      const newProject = {
        name: nombreProyecto,
        desc: descripcion,
        img: e.target.result,
        time: Date.now()
      }
      // 合并历史项目数据
      const projectList = JSON.parse(localStorage.getItem('projectList') || '[]')
      projectList.push(newProject)
      localStorage.setItem('projectList', JSON.stringify(projectList))
      // 跳转到展示页
      window.location.href = './data.html'
    }
    reader.readAsDataURL(file)
    return
  }
  // 无上传图片的场景
  const newProject = {
    name: nombreProyecto,
    desc: descripcion,
    img: '',
    time: Date.now()
  }
  const projectList = JSON.parse(localStorage.getItem('projectList') || '[]')
  projectList.push(newProject)
  localStorage.setItem('projectList', JSON.stringify(projectList))
  window.location.href = './data.html'
}

2. 在data.html中引入同一份app.js，添加页面加载时自动渲染的逻辑：

// 页面加载完成自动执行渲染
window.addEventListener('DOMContentLoaded', writeData)

function writeData() {
  const projectContainer = document.getElementById("proyects")
  const projectList = JSON.parse(localStorage.getItem('projectList') || '[]')
  // 遍历渲染所有项目
  projectList.forEach(project => {
    const projectItem = document.createElement("div");
    // 可直接替换为你现有CSS的类名，样式完全复用
    projectItem.className = 'project-item'
    projectItem.innerHTML = `
      <h3>${project.name}</h3>
      <p>${project.desc}</p>
      ${project.img ? `<img src="${project.img}" alt="${project.name}">` : ''}
    `
    projectContainer.appendChild(projectItem);
  })
}

该方案限制：数据仅存储在当前用户浏览器本地，清空缓存或更换设备数据会丢失，适合个人/单场景使用。

方案2：轻量后端方案（数据持久化多端可用，改造成本低） #

如果需要多用户共享、持久化存储数据，只需要加少量后端代码，原有前端静态资源完全不用重构：

1. 新建server.js（基于Node.js Express，15行代码即可）：

const express = require('express')
const app = express()
const fs = require('fs')
// 直接托管现有所有静态文件，原HTML/CSS/JS路径完全不用改
app.use(express.static('./'))
app.use(express.json({limit: '5mb'}))

// 提交项目接口
app.post('/add', (req, res) => {
  const list = JSON.parse(fs.readFileSync('./projects.json', 'utf-8') || '[]')
  list.push(req.body)
  fs.writeFileSync('./projects.json', JSON.stringify(list))
  res.send({status: 'ok'})
})
// 获取项目列表接口
app.get('/list', (req, res) => res.send(JSON.parse(fs.readFileSync('./projects.json', 'utf-8') || '[]')))

app.listen(3000, () => console.log('服务启动完成'))

2. 把前端JS里存localStorage的逻辑换成调用对应接口即可，渲染逻辑仅需把读localStorage换成调/list接口拿数据。

原有代码问题修正 #

你现有的JS存在两个基础问题，可以同步调整：

• 变量名不统一：getData里定义的变量是nombreProyecto，writeData里用了不存在的proyectName
• DOM操作逻辑错误：创建了newDivName节点但最后插入的是字符串变量proyectName，会报错

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