多個 JSP 頁面共享 JavaScript 物件最佳方案：window.top 快取

問題背景

多個 JSP 頁面 (如 A.jsp 開啟 B.jsp) 需共享同一 JavaScript 物件。全域變數、靜態變數在頁面跳轉時失效，Cookie 不安全且容量限制。

核心解決方案：window.top['_CACHE']

var share = {
  // 跨框架資料共享介面
  data: function(name, value) {
    var top = window.top,
        cache = top['_CACHE'] || {};
    top['_CACHE'] = cache;
    return value !== undefined ? cache[name] = value : cache[name];
  },
  // 資料共享刪除介面
  removeData: function(name) {
    var cache = window.top['_CACHE'];
    if (cache && cache[name]) delete cache[name];
  }
};

實際應用流程

1. A.jsp 開啟 B.jsp 時存入共享物件

var chatFrdList = new Object(); // 共享物件
var frdUserId = "user123"; // 好友 ID

// 開啟新視窗/分頁前執行
window.top['_CACHE'] = chatFrdList;
window.top['_CACHE'][frdUserId] = frdUserId;

// 開啟 B.jsp
window.open('B.jsp');

2. B.jsp 讀取並操作共享物件

// 關閉聊天視窗時從共享物件移除
var e = document.getElementsByName("chatWindow");
var keyId = e[0].id;
delete window.top['_CACHE'][keyId];

3. A.jsp 後續操作共享物件

可隨時存取 window.top['_CACHE'] 進行增刪改查，實現多頁面物件共享。

技術原理

• window.top 參考最頂層視窗物件
• 同源策略下，同域名下所有頁面共享同一 window.top
• 自訂屬性 _CACHE 掛載於 top 物件，生命週期隨瀏覽器分頁關閉而結束
• 物件儲存於記憶體，效能極佳，無序列化開銷

注意事項與限制

現代替代方案

• localStorage / sessionStorage：持久化/會話級儲存，跨分頁共享
• BroadcastChannel API：同源不同文脈通訊
• SharedWorker：多文脈共享 Worker 執行緒
• 狀態管理庫 (Redux/Vuex/Pinia) + 持久化中介軟體

1. 上一篇文章： JSP 獲取伺服器時間簡單調用範例
2. 下一篇文章： JSP 倒數計時與自動跳轉頁面實作

關於JSP

JSP request.getParameter() 完整教學：表單參數接收、編碼亂碼解決與實務範例

request.getParameter() 是 JSP/S

Struts 2 + Spring + iBatis 框架整合完整指南

專案背景與架構概覽 本文記錄一個實戰專案中 Struts 2

Struts2 自定義下拉框標簽開發指南

Struts2 自定義下拉框標簽開發指南 在企業級應用中，

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

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