实现a标签跳转后保留location hash的解决方案

方案一：动态修改内部链接的href，自动追加当前语言Hash #

在每个页面加载完成后，遍历所有内部跳转的<a>标签，自动给不带Hash的链接追加当前的语言标识Hash：

document.addEventListener('DOMContentLoaded', () => {
  const currentHash = window.location.hash;
  // 只处理预设的语言Hash，比如#en、#zh
  if (currentHash && ['#en', '#zh'].includes(currentHash)) {
    document.querySelectorAll('a[href]').forEach(link => {
      const href = link.getAttribute('href');
      // 跳过外部链接和已带Hash的链接
      if (!href.startsWith('http') && !href.includes('#')) {
        link.setAttribute('href', `${href}${currentHash}`);
      }
    });
  }
});

该方案直接修改页面内的跳转链接，确保用户点击后直接跳转到带语言Hash的目标页面，无需额外的页面加载后处理。

方案二：用localStorage存储语言偏好，新页面加载时自动恢复Hash #

当用户切换语言时，将选中的语言标识存入本地存储，后续页面加载时自动读取并设置Hash：

1. 语言切换时存储标识：

// 示例：英文切换按钮的点击事件
document.querySelector('.lang-btn-en').addEventListener('click', () => {
  localStorage.setItem('activeLang', 'en');
  window.location.hash = '#en';
  // 此处可同步触发页面翻译逻辑
});

2. 每个页面加载时恢复Hash：

document.addEventListener('DOMContentLoaded', () => {
  const savedLang = localStorage.getItem('activeLang');
  const currentHash = window.location.hash;
  // 如果当前URL无Hash，但本地存储有语言偏好，自动设置Hash
  if (savedLang && !currentHash) {
    // 用replaceState避免页面刷新，直接修改URL Hash
    window.history.replaceState(null, null, `#${savedLang}`);
    // 同步触发当前页面的翻译逻辑
  }
});

该方案无需修改大量链接，适合页面较多的场景，同时能在用户清除浏览器缓存前保留语言偏好。

注意事项 #

• 方案一中需避免重复追加Hash，可在修改链接前检查href是否已包含目标Hash；
• 方案二中需处理用户清除localStorage的情况，此时可默认显示网站的原生语言；
• 确保语言切换逻辑与Hash、localStorage的操作同步，避免出现状态不一致的问题。

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