如何在跨HTML页面的JavaScript模块中共享并访问同一AVL树实例？

因为每个HTML页面都是独立的浏览器执行上下文，直接通过模块导出必然会生成新实例，下面给你几个实际可行的解决办法：

1. 序列化树结构到存储（sessionStorage/localStorage） #

虽然不能直接存储对象实例，但可以把AVL树的核心数据结构序列化为JSON字符串存储，在另一个页面读取后重建实例：

• 第一步：在第一个页面，把AVL树的节点数据转成可JSON化的格式（比如每个节点存key、value、left、right、height，注意递归处理避免循环引用）
• 第二步：用JSON.stringify()转成字符串，存入sessionStorage（关闭标签页就消失，比localStorage更适合临时共享场景）
• 第三步：第二个页面读取存储的字符串，用JSON.parse()解析，然后遍历数据重新插入到新的AVL树实例中，实现状态同步

示例代码片段：

// 页面1：序列化AVL树
function serializeAVL(node) {
  if (!node) return null;
  return {
    key: node.key,
    value: node.value,
    height: node.height,
    left: serializeAVL(node.left),
    right: serializeAVL(node.right)
  };
}
sessionStorage.setItem('avlTreeData', JSON.stringify(serializeAVL(avlTree.root)));

// 页面2：重建AVL树
function deserializeAVL(data, avlTree) {
  if (!data) return;
  avlTree.insert(data.key, data.value);
  deserializeAVL(data.left, avlTree);
  deserializeAVL(data.right, avlTree);
}
const avlData = JSON.parse(sessionStorage.getItem('avlTreeData'));
const newAvlTree = new AVLTree();
deserializeAVL(avlData, newAvlTree);

2. 使用SharedWorker共享实例 #

这是唯一能真正实现同一个AVL树实例跨页面访问的方案：

• 把AVL树的逻辑放在SharedWorker脚本里，所有同源页面都连接这个Worker
• 页面通过postMessage()给Worker发送操作指令（比如插入、查询、删除），Worker在自身独立上下文维护唯一的AVL树实例，处理完指令后返回结果给页面

示例代码片段：

// shared-worker.js（SharedWorker脚本）
class AVLTree { /* 你的AVL树实现代码 */ }
const avlTree = new AVLTree();

self.onconnect = function(e) {
  const port = e.ports[0];
  port.onmessage = function(msg) {
    const { action, payload } = msg.data;
    let result;
    switch(action) {
      case 'insert':
        avlTree.insert(payload.key, payload.value);
        result = '插入成功';
        break;
      case 'search':
        result = avlTree.search(payload.key);
        break;
      // 可扩展其他操作：删除、遍历等
    }
    port.postMessage(result);
  };
  port.start();
};

// 页面1和页面2：连接SharedWorker
const worker = new SharedWorker('shared-worker.js');
worker.port.postMessage({ action: 'insert', payload: { key: 1, value: 'test' } });
worker.port.onmessage = function(msg) {
  console.log('Worker返回结果:', msg.data);
};
worker.port.start();

3. Broadcast Channel + 存储同步状态 #

如果不需要严格的同一个实例，只是保持两个页面的AVL树状态一致，可以用这个方案：

• 第一个页面修改AVL树后，把修改的操作（比如插入了哪个节点）通过Broadcast Channel广播出去
• 第二个页面监听广播，收到后同步更新自己的AVL树实例
• 同时结合sessionStorage存储最新的树结构，页面刷新时可以重新加载

为什么你之前的尝试不行？ #

• 模块导出：每个页面加载模块时都会重新执行模块代码，所以每次导出的都是当前页面上下文的新实例，不可能跨页面共享
• localStorage存对象：localStorage只支持字符串，直接存对象会被转成[object Object]字符串，必须先序列化为JSON

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