如何实现基于标签页的独立localStorage存储？

localStorage是同源所有标签页共享的存储，直接存储评论内容会导致多标签页互相覆盖。下面给你几个实用的解决方案：

方案1：用sessionStorage直接存储（最简单） #

sessionStorage是标签页级别的隔离存储，同一个标签页刷新后数据不会丢失，但不同标签页之间完全独立，关闭标签页数据会被清除。如果你的需求只是刷新页面保留评论，不需要跨会话（关闭标签页后再打开还恢复），这个方案最省心。

代码示例： #

// 保存评论内容（输入框内容变化时触发）
const commentInput = document.getElementById('comment-input');
commentInput.addEventListener('input', () => {
  sessionStorage.setItem('currentComment', commentInput.value);
});

// 页面加载时恢复评论
window.addEventListener('load', () => {
  const savedComment = sessionStorage.getItem('currentComment');
  if (savedComment) {
    commentInput.value = savedComment;
  }
});

方案2：自定义标签页唯一ID+localStorage（支持持久化） #

如果需要关闭标签页后再打开还能恢复评论，就得给每个标签页生成唯一标识，把评论内容和这个标识绑定存储。用sessionStorage存标签页ID（确保标签页隔离），用localStorage存带ID前缀的评论数据，同时在标签页关闭时清理无效数据。

代码示例： #

// 生成或获取当前标签页的唯一ID
let tabId = sessionStorage.getItem('commentTabId');
if (!tabId) {
  // 用时间戳+随机字符串生成唯一ID
  tabId = `comment-tab-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
  sessionStorage.setItem('commentTabId', tabId);
}

const commentInput = document.getElementById('comment-input');

// 保存评论
commentInput.addEventListener('input', () => {
  localStorage.setItem(`comment_${tabId}`, commentInput.value);
});

// 页面加载时恢复评论
window.addEventListener('load', () => {
  const savedComment = localStorage.getItem(`comment_${tabId}`);
  if (savedComment) {
    commentInput.value = savedComment;
  }
});

// 标签页关闭时清理localStorage中的对应数据，避免垃圾积累
window.addEventListener('beforeunload', () => {
  localStorage.removeItem(`comment_${tabId}`);
});

补充说明： #

• 如果需要支持关闭标签页后再打开恢复评论，可以把tabId结合用户标识（比如登录用户ID）存储，但未登录用户很难做到跨会话恢复特定标签页的评论，因为标签页关闭后唯一ID会丢失。
• 可以定期清理localStorage中过期的评论数据（比如设置数据时加上时间戳，下次加载时删除超过N天的数据）。

方案3：IndexedDB（适合大量复杂数据） #

如果需要存储的不止是评论内容，还有更多关联数据，可以用IndexedDB。它支持更复杂的数据结构，也可以给每条数据加上标签页ID的字段来实现隔离。不过对于简单的评论场景，前两个方案足够，这个方案适合更复杂的需求。

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