如何使用JavaScript/jQuery向已有JSON文件追加冲浪会话数据

需求回顾 #

你需要实现的是：用户上传单个冲浪会话的JSON文件后，将这个会话数据追加到存储所有会话的历史JSON文件的sessions数组中。

先明确两个关键JSON结构：

• 单个会话JSON（用户上传的文件）：

{"sessions": [{"waves": [...], ...}]}

• 历史会话JSON：

{"sessions": [会话1, 会话2, ...]}

实现方案（前端+jQuery） #

下面分带后端存储和**本地测试（无后端）**两种情况来写代码，你可以根据实际场景选择：

1. 带后端接口的完整实现

假设后端已经提供了获取历史数据和保存历史数据的接口，前端用jQuery来处理文件上传、数据合并和提交：

HTML部分

<!-- 文件上传控件，只允许选择JSON文件 -->
<input type="file" id="sessionUpload" accept=".json">
<!-- 触发保存的按钮 -->
<button id="saveSession" style="margin-left: 10px;">追加到历史记录</button>

JavaScript/jQuery部分

$(document).ready(function() {
  let newSession = null; // 存储读取到的新会话数据

  // 监听文件选择，读取并解析上传的JSON
  $('#sessionUpload').on('change', function(e) {
    const selectedFile = e.target.files[0];
    if (!selectedFile) return;

    const reader = new FileReader();
    reader.onload = function(event) {
      try {
        // 解析JSON，拿到新会话数据
        newSession = JSON.parse(event.target.result);
        alert('会话文件读取成功，可以点击保存啦～');
      } catch (error) {
        alert('哎呀，这不是有效的JSON文件，请检查格式后重试！');
        newSession = null;
      }
    };
    reader.readAsText(selectedFile);
  });

  // 点击按钮，合并并保存数据
  $('#saveSession').on('click', function() {
    if (!newSession) {
      alert('请先选择一个有效的会话文件哦');
      return;
    }

    // 第一步：获取历史会话数据
    $.ajax({
      url: '/api/get-surf-history', // 替换成你的后端接口地址
      method: 'GET',
      dataType: 'json',
      success: function(historyData) {
        // 确保历史数据结构正确，如果后端返回的格式不对，初始化一个空结构
        if (!historyData || !Array.isArray(historyData.sessions)) {
          historyData = { sessions: [] };
        }

        // 第二步：把新会话追加到历史数组里
        // 注意：新上传的JSON里sessions是数组，直接展开追加（支持一次传多个会话的情况）
        if (Array.isArray(newSession.sessions) && newSession.sessions.length > 0) {
          historyData.sessions.push(...newSession.sessions);
        }

        // 第三步：把更新后的历史数据提交回后端
        $.ajax({
          url: '/api/save-surf-history', // 替换成你的后端保存接口
          method: 'POST',
          contentType: 'application/json',
          data: JSON.stringify(historyData),
          success: function() {
            alert('会话已成功追加到历史记录！');
            // 重置状态，方便下次上传
            newSession = null;
            $('#sessionUpload').val('');
          },
          error: function(err) {
            alert('保存失败了，请稍后重试');
            console.error('保存错误详情：', err);
          }
        });
      },
      error: function() {
        // 如果历史数据不存在（比如第一次上传），直接创建新的历史结构
        const newHistory = { sessions: [] };
        if (Array.isArray(newSession.sessions) && newSession.sessions.length > 0) {
          newHistory.sessions.push(...newSession.sessions);
        }

        // 提交新的历史数据到后端
        $.ajax({
          url: '/api/save-surf-history',
          method: 'POST',
          contentType: 'application/json',
          data: JSON.stringify(newHistory),
          success: function() {
            alert('历史记录已创建，会话保存成功！');
            newSession = null;
            $('#sessionUpload').val('');
          },
          error: function(err) {
            alert('创建历史记录失败');
            console.error('错误详情：', err);
          }
        });
      }
    });
  });
});

2. 本地测试方案（无后端，用localStorage模拟）

如果暂时没有后端接口，想先在本地测试功能，可以用浏览器的localStorage来存储历史数据，代码更简单：

$(document).ready(function() {
  let newSession = null;

  $('#sessionUpload').on('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(event) {
      try {
        newSession = JSON.parse(event.target.result);
        alert('文件读取成功');
      } catch (err) {
        alert('无效的JSON文件');
        newSession = null;
      }
    };
    reader.readAsText(file);
  });

  $('#saveSession').on('click', function() {
    if (!newSession) {
      alert('请先选择有效文件');
      return;
    }

    // 从localStorage读取历史数据，没有的话初始化空结构
    let historyData = JSON.parse(localStorage.getItem('surfSessionsHistory')) || { sessions: [] };

    // 追加新会话
    if (Array.isArray(newSession.sessions) && newSession.sessions.length > 0) {
      historyData.sessions.push(...newSession.sessions);
    }

    // 保存回localStorage
    localStorage.setItem('surfSessionsHistory', JSON.stringify(historyData));
    alert('会话已追加到本地历史记录！');

    // 重置状态
    newSession = null;
    $('#sessionUpload').val('');
  });
});

关键注意事项 #

• 错误处理：一定要加JSON解析的try-catch，避免用户上传无效文件导致程序崩溃
• 结构校验：每次处理数据前，检查sessions是否为数组，防止数据格式错误导致的bug
• 并发问题：如果是多人使用的系统，后端要处理并发写入的情况（比如加锁或者用数据库事务）
• 数据大小：如果会话数据很大，要考虑分块处理或者优化存储方式

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