跨站日历数据同步问题求助：本地正常部署后用户提交数据孤立

你的核心问题在于依赖浏览器本地存储（localStorage/sessionStorage）实现数据存储——这类存储机制的数据仅保存在单个用户的浏览器设备中，完全不具备跨用户、跨设备的共享能力，所以线上部署后，用户提交的数据只能自己查看，其他人无法获取。

要实现跨站点的用户数据共享，必须引入后端服务+数据库来统一存储和分发数据，以下是具体实现思路：

1. 核心架构调整 #

• 新增后端服务：负责接收前端提交的时间/附加信息，写入数据库；同时提供接口供关联站点查询数据。
• 引入数据库：用于持久化存储所有用户提交的事件数据，支持多用户读取。

2. 技术选型建议（适配JavaScript生态） #

• 后端：用Node.js + Express框架，和前端技术栈一致，学习成本低。
• 数据库：小项目用MongoDB（文档型，易上手）或SQLite（轻量文件型）；大流量场景用MySQL/PostgreSQL。

3. 简单实现示例 #

后端代码（Node.js + Express + MongoDB） #

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();
// 允许跨域请求（适配两个不同域名的站点）
app.use(cors());
// 解析JSON格式请求体
app.use(express.json());

// 连接MongoDB数据库
mongoose.connect('mongodb://localhost:27017/calendar_events')
  .then(() => console.log('数据库连接成功'))
  .catch(err => console.error('数据库连接失败:', err));

// 定义事件数据模型
const EventSchema = new mongoose.Schema({
  date: { type: String, required: true },
  time: { type: String, required: true },
  extraInfo: { type: String },
  submitTime: { type: Date, default: Date.now }
});
const Event = mongoose.model('Event', EventSchema);

// 接收前端提交的事件接口
app.post('/api/submit-event', async (req, res) => {
  try {
    const newEvent = new Event(req.body);
    await newEvent.save();
    res.status(201).json({ message: '提交成功', data: newEvent });
  } catch (err) {
    res.status(400).json({ error: '提交失败', message: err.message });
  }
});

// 供关联站点查询所有事件的接口
app.get('/api/get-events', async (req, res) => {
  try {
    // 按提交时间倒序返回最新事件
    const events = await Event.find().sort({ submitTime: -1 });
    res.json(events);
  } catch (err) {
    res.status(500).json({ error: '获取数据失败', message: err.message });
  }
});

// 启动服务，监听3000端口
app.listen(3000, () => console.log('后端服务运行在 http://localhost:3000'));

前端提交页面改造 #

把原来存本地存储的逻辑改成调用后端API：

// 提交事件到后端
async function submitCalendarEvent() {
  const date = document.querySelector('#date-input').value;
  const time = document.querySelector('#time-input').value;
  const extraInfo = document.querySelector('#info-input').value;

  if (!date || !time) {
    alert('请填写日期和时间');
    return;
  }

  try {
    await fetch('https://你的后端部署域名/api/submit-event', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ date, time, extraInfo })
    });
    alert('提交成功');
    // 清空输入框
    document.querySelector('#date-input').value = '';
    document.querySelector('#time-input').value = '';
    document.querySelector('#info-input').value = '';
  } catch (err) {
    console.error('提交出错:', err);
    alert('提交失败，请重试');
  }
}

前端展示页面改造 #

从后端拉取数据并渲染：

// 加载并展示所有事件
async function loadCalendarEvents() {
  const eventContainer = document.querySelector('#event-container');
  try {
    const response = await fetch('https://你的后端部署域名/api/get-events');
    const events = await response.json();

    if (events.length === 0) {
      eventContainer.innerHTML = '<p>暂无事件</p>';
      return;
    }

    // 渲染事件列表
    eventContainer.innerHTML = events.map(event => `
      <div class="event-card">
        <h4>${event.date} ${event.time}</h4>
        ${event.extraInfo ? `<p>${event.extraInfo}</p>` : ''}
        <small>提交于: ${new Date(event.submitTime).toLocaleString()}</small>
      </div>
    `).join('');
  } catch (err) {
    console.error('加载数据出错:', err);
    eventContainer.innerHTML = '<p>加载失败，请稍后重试</p>';
  }
}

// 页面加载时自动加载数据
window.addEventListener('load', loadCalendarEvents);

4. 部署注意事项 #

• 后端服务要部署到云服务器（如阿里云ECS、腾讯云CVM），或用Serverless服务（如Vercel、Netlify Functions）简化部署。
• 数据库可以用云数据库服务（如MongoDB Atlas、阿里云RDS），不用自己搭建维护。
• 跨域问题：如果前端站点和后端域名不同，必须在后端配置CORS（示例中已用cors中间件处理），或用反向代理解决。
• 数据校验：后端要对提交的日期、时间格式做校验，防止非法数据写入数据库。

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