如何实现浏览器运行时跨标签共享数据，关闭浏览器自动清除？

当然可以实现！你想要的这种「浏览器会话期间跨标签页共享数据，浏览器完全关闭后自动清除」的存储方案，刚好有几种靠谱的实现方式，我给你详细说说：

方案1：结合 localStorage + 标签页计数跟踪 #

这个思路是用localStorage天然的跨标签页共享特性存储数据，同时通过监听标签页的打开/关闭事件，维护一个“活跃标签页计数”。当最后一个标签页关闭时，就清除localStorage里的目标数据——这样既保证单个标签页关闭后其他标签页还能读数据，又能在浏览器全关时自动清除。

具体代码示例：

// 初始化活跃标签页计数
if (!localStorage.getItem('tabCount')) {
  localStorage.setItem('tabCount', 1);
} else {
  localStorage.setItem('tabCount', parseInt(localStorage.getItem('tabCount')) + 1);
}

// 监听标签页关闭前的事件
window.addEventListener('beforeunload', () => {
  const currentCount = parseInt(localStorage.getItem('tabCount'));
  if (currentCount <= 1) {
    // 最后一个标签页关闭，清除目标数据和计数
    localStorage.removeItem('img');
    localStorage.removeItem('tabCount');
  } else {
    // 还有其他标签页活跃，减少计数
    localStorage.setItem('tabCount', currentCount - 1);
  }
});

// 存储图片地址的方式和之前一致
localStorage.setItem('img', $('#cpimgt').attr('src'));

注意：这个方案依赖beforeunload事件，主流浏览器都支持，但如果遇到浏览器崩溃这类极端情况，可能无法触发清除逻辑，不过日常使用完全够用。

方案2：Broadcast Channel API + sessionStorage #

如果不想依赖localStorage，可以用sessionStorage存储当前标签页的数据，同时通过Broadcast Channel API在同源标签页之间同步数据。这样每个标签页的sessionStorage都会保持一致，而且浏览器关闭后所有sessionStorage会自动销毁，完美匹配你的需求。

代码示例：

// 创建专门用于同步图片数据的广播频道
const imgSyncChannel = new BroadcastChannel('imgStorageSync');

// 封装存储方法：存到当前标签页的sessionStorage，同时广播给其他标签页
function saveImgSrc(src) {
  sessionStorage.setItem('img', src);
  imgSyncChannel.postMessage({ type: 'updateImg', data: src });
}

// 监听其他标签页的广播，同步数据到当前标签页的sessionStorage
imgSyncChannel.addEventListener('message', (event) => {
  if (event.data.type === 'updateImg') {
    sessionStorage.setItem('img', event.data.data);
  }
});

// 调用示例：存储图片地址
saveImgSrc($('#cpimgt').attr('src'));

// 获取数据时直接从sessionStorage读取即可
const savedImgSrc = sessionStorage.getItem('img');

这个方案完全基于会话级存储，不需要手动处理清除逻辑，跨标签页同步也更可靠，不受beforeunload的限制，推荐优先考虑。

方案3：IndexedDB 临时存储模式 #

如果你需要存储的是复杂或大量数据，可以用IndexedDB的临时存储模式——这种数据库会在浏览器会话结束（所有标签页关闭）时自动被清除，同时本身支持同源跨标签页共享，刚好符合你的需求。

简化版代码示例：

// 打开临时IndexedDB（temporary: true 是核心配置）
const dbRequest = indexedDB.open('imgStorageDB', 1, {
  temporary: true
});

// 首次打开时创建存储对象
dbRequest.onupgradeneeded = (event) => {
  const db = event.target.result;
  db.createObjectStore('images', { keyPath: 'id' });
};

// 数据库打开成功后，进行存储/读取操作
dbRequest.onsuccess = (event) => {
  const db = event.target.result;
  
  // 存储图片地址
  const transaction = db.transaction('images', 'readwrite');
  const imgStore = transaction.objectStore('images');
  imgStore.put({ id: 'mainImg', src: $('#cpimgt').attr('src') });

  // 读取图片地址
  const getRequest = imgStore.get('mainImg');
  getRequest.onsuccess = () => {
    console.log('已存储的图片地址：', getRequest.result.src);
  };
};

这个方案适合复杂场景，要是只是存个图片URL这种简单数据，前两种方案会更轻便。

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