AJAX + JSP 草稿自動保存實戰：定時儲存、恢復與併發處理完整方案

場景痛點：編輯長文時的「意外關閉」噩夢

用戶編寫長文章、填寫複雜表單時，瀏覽器崩潰、網路斷開、誤關分頁、Session 過期，都可能導致內容徹底丟失。草稿自動保存 是提升用戶體驗、降低內容流失率的關鍵功能。本文提供基於 原生 JavaScript (無框架依賴) + JSP 後端 的完整實現，涵蓋定時保存、手動保存、草稿恢復、多用戶隔離、編碼處理。

一、前端頁面：index.html (關鍵結構)

<!DOCTYPE html>
<html><head>
  <meta charset="UTF-8">
  <title>AJAX 草稿自動保存演示</title>
  <script src="ajaxrequest.js"></script> <!-- 通用 AJAX 封裝 -->
  <script src="autosave.js"></script>   <!-- 自動保存邏輯 -->
</head><body>
  <h2>文章編輯器</h2>

  <!-- 用戶識別 (實際專案從 Session/Token 獲取) -->
  <label>用戶名：<input type="text" id="memName" value="user001" readonly></label><br><br>

  <label><input type="checkbox" id="Draft_AutoSave" checked onchange="setAutoSave()"> 啟用自動保存 (10秒間隔)</label><br><br>

  <label>內容：<br>
  <textarea id="message" rows="10" cols="60">開始寫作...</textarea></label><br><br>

  <div id="AutoSaveMsg" style="color:#666;min-height:1.2em;"></div><br>

  <button onclick="manualSave()">手動保存</button>
  <button onclick="restoreDraft()">恢復草稿</button>
  <button onclick="submitFinal()">最終發布</button>
</body></html>

二、通用 AJAX 封裝：ajaxrequest.js

// 簡易 AJAX 封裝 (支援 GET/POST、JSON/表單、回調)
function AJAXRequest() {
  this.url = '';
  this.method = 'POST';
  this.content = '';
  this.async = true;
  this.callback = function(xmlObj) {};
  this.send = function() {
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) this.callback(xhr);
        else console.error('AJAX Error:', xhr.status);
      }
    }.bind(this);
    xhr.open(this.method, this.url, this.async);
    if (this.method === 'POST') {
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    }
    xhr.send(this.content);
  };
}

三、自動保存核心邏輯：autosave.js

// 全域狀態
var FormContent = document.getElementById('message');
var AutoSaveMsg = document.getElementById('AutoSaveMsg');
var memName = document.getElementById('memName').value;
var AutoSaveTime = 10000; // 10 秒
var AutoSaveTimer = null;

// 初始化
setAutoSave();

function autoSave() {
  if (!FormContent.value || !memName) return;
  var ajax = new AJAXRequest();
  ajax.url = 'autosave.jsp';
  ajax.content = 'action=AutoSave&memname=' + encodeURIComponent(memName)
               + '&postcontent=' + encodeURIComponent(FormContent.value);
  ajax.callback = function(xhr) {
    AutoSaveMsg.innerHTML = xhr.responseText;
  };
  ajax.send();
}

function setAutoSave() {
  var chk = document.getElementById('Draft_AutoSave');
  if (chk.checked) {
    AutoSaveTimer = setInterval(autoSave, AutoSaveTime);
    AutoSaveMsg.innerHTML = '自動保存已啟用';
  } else {
    clearInterval(AutoSaveTimer);
    AutoSaveMsg.innerHTML = '自動保存已停用';
  }
}

function restoreDraft() {
  if (!memName) return;
  AutoSaveMsg.innerHTML = '正在恢復草稿...';
  var ajax = new AJAXRequest();
  ajax.url = 'autosave.jsp';
  ajax.content = 'action=Restore&memname=' + encodeURIComponent(memName);
  ajax.callback = function(xhr) {
    var text = xhr.responseText.trim();
    if (text) {
      FormContent.value = text;
      AutoSaveMsg.innerHTML = '草稿恢復成功！';
    } else {
      AutoSaveMsg.innerHTML = '無可用草稿';
    }
  };
  ajax.send();
}

function manualSave() {
  if (!FormContent.value || !memName) return;
  var ajax = new AJAXRequest();
  ajax.url = 'autosave.jsp';
  ajax.content = 'action=Save&memname=' + encodeURIComponent(memName)
               + '&postcontent=' + encodeURIComponent(FormContent.value);
  ajax.callback = function(xhr) {
    AutoSaveMsg.innerHTML = xhr.responseText;
  };
  ajax.send();
}

function submitFinal() {
  // 實際提交業務邏輯 (略)
  alert('提交至正式資料表...');
}

四、後端處理：autosave.jsp (檔案級持久化，生產環境建議用資料庫)

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" import="java.io.*,java.util.*" %>
<%
  String action = request.getParameter("action");
  String memName = request.getParameter("memname");
  String postContent = request.getParameter("postcontent");

  if (memName == null || memName.trim().isEmpty()) {
    out.print("錯誤：用戶名為空"); return;
  }

  // 安全：防止路徑遍歷
  String safeName = memName.replaceAll("[^a-zA-Z0-9_-]", "");
  String dir = getServletContext().getRealPath("/WEB-INF/drafts/");
  new File(dir).mkdirs();
  File file = new File(dir, safeName + ".txt");

  if ("AutoSave".equals(action) || "Save".equals(action)) {
    // 接收端已 UTF-8，此處無需轉碼；若前端未設 charset 需處理 ISO-8859-1
    try (FileWriter fw = new FileWriter(file, StandardCharsets.UTF_8)) {
      fw.write(postContent == null ? "" : postContent);
      out.print("最後於 " + new Date() + " 自動保存成功！");
    } catch (IOException e) {
      out.print("保存失敗：" + e.getMessage());
    }
  } else if ("Restore".equals(action)) {
    if (file.exists()) {
      try (BufferedReader br = new BufferedReader(new InputStreamReader(new FileInputStream(file), StandardCharsets.UTF_8))) {
        StringBuilder sb = new StringBuilder();
        String line;
        while ((line = br.readLine()) != null) sb.append(line).append('\n');
        out.print(sb.toString().trim());
      } catch (IOException e) {
        out.print("讀取失敗：" + e.getMessage());
      }
    } else {
      out.print(""); // 無草稿
    }
  } else {
    out.print("未知操作：" + action);
  }
%>

五、關鍵技術點深度解析

5.1 編碼鏈路：前端 UTF-8 → 後端 UTF-8

• 頁面 `` + JSP `pageEncoding="UTF-8"` + `contentType="text/html;charset=UTF-8"`。
• JS `encodeURIComponent` 確保參數安全傳輸。
• 後端 `request.setCharacterEncoding("UTF-8")` (在 Filter 統一設定更佳)。
• 檔案讀寫顯式指定 `StandardCharsets.UTF_8` (Java 7+)。

5.2 併發安全：多用戶隔離 + 檔案鎖

• 以 `用戶名.txt` 隔離草稿，天然避免跨用戶覆蓋。
• 高併發場景下，單用戶多標籤頁同時保存會造成檔案寫入衝突。建議：
  • 資料庫層面：`UPDATE drafts SET content=?, updated=NOW() WHERE user_id=?` (行鎖)。
  • 檔案層面：`FileChannel.lock()` 或寫入臨時檔再 `renameTo` (原子替換)。

5.3 效能優化：防抖節流、差異保存

• 當前方案：固定 10 秒 `setInterval`，無論內容是否變更都發請求。
• 優化：oninput 事件 + 防抖 2 秒 + 內容變更檢測 (MD5/長度比較) → 僅在內容真正變更時發請求。
• 大文本：採用 差異增量保存 (如 Google Docs OT 算法)，僅傳輸變更片段。

5.4 安全加固

• 輸入驗證：`memName` 白名單過濾，防止 `../../etc/passwd` 路徑遍歷。
• 儲存路徑：放在 `WEB-INF/drafts/` 目錄，外部無法直接 URL 訪問。
• 大小限制：單草稿限制 1MB，防止惡意佔用磁碟。
• 清理策略：定時任務清理 30 天未更新的草稿檔案。

六、現代化演進：LocalStorage + IndexedDB + Service Worker

推薦混合策略：本地優先 (IndexedDB) → 定時推送至 Server → 跨設備合併衝突解決 (Last-Write-Wins 或 Operational Transformation)。

結語

草稿自動保存看似簡單，實則涉及 編碼一致性、併發控制、網路容錯、安全防護、效能平衡 等多維工程課題。本文提供的「前端定時輪詢 + 後端檔案持久化」方案，代碼量極小、零框架依賴、即刻可用，適合快速原型、內部工具、維護舊系統。面向生產的現代應用，請採用 IndexedDB 本地優先 + 後端資料庫 + 衝突合併策略 的混合架構，打造「永不丟失內容」的極致寫作體驗。

1. 上一篇文章： JSP + AJAX 評論系統實戰：Prototype.js + JDOM + XML 存儲完整實現
2. 下一篇文章： JSP 經典編程技巧 68 例匯總：從基礎語法到進階整合的實戰索引

關於JSP

JSP 顯示資料庫數據表：從基礎迴圈到 JSTL 最佳實踐

JSP 動態渲染資料庫數據表完整指南 「增刪改查」中的「查」

Struts2 類型轉換實戰：DefaultTypeConverter 自定義對象轉換

背景 Struts2 內建轉換器支援 8 大基本類型包裝類、

Servlet 表單處理與 URL 路徑映射機制深度解析

Servlet 具備完整的請求響應能力，可直接處理表單提交數

JSP 簡單練習：EL 表達式操作 JavaBean

前言 EL (Expression Language) 設計