如何在检测国家后仍允许手动切换网站语言？

我完全懂你的困扰——自动跳转逻辑能帮新用户快速进入对应语言版本，但用户手动切回英文时却被强行拉回去，体验太糟了。咱们可以借助**本地存储（localStorage）**来区分「首次访问的自动跳转」和「用户手动选择的语言」，让脚本既能服务新访客，又能尊重老用户的主动选择。

问题根源 #

当前脚本没有区分两种场景：当用户手动切换到example.com（无语言路径）时，脚本检测到lang为空，就会触发默认跳转逻辑，把用户拉回对应语言版本，完全忽略了用户的手动操作。

解决方案 #

核心思路很简单：

• 当用户手动切换语言时，用localStorage记录这个选择
• 修改原脚本，优先检查用户的手动选择，如果存在就终止自动跳转；如果没有（说明是首次访问），再执行原有的自动跳转逻辑

步骤1：更新自动跳转脚本

function checkForCountry() {
  // 第一步：优先检查用户是否手动选择过语言
  const userSelectedLang = localStorage.getItem('userSelectedLang');
  if (userSelectedLang) {
    // 有手动选择记录，直接终止跳转逻辑
    return;
  }

  let lang = '';
  const loc = window.location.href;
  // 这里假设code是你通过API获取到的区域码（比如'IT'、'DE'）
  switch (code) {
    case 'DE':
    case 'AT':
      lang = '/de/';
      break;
    case 'IT':
      lang = '/it/';
      break;
    default:
      lang = '';
  }

  // 保留原有的避免循环跳转逻辑
  if (loc.indexOf('.com') !== -1 && loc.indexOf(`${lang}`) !== -1) {
    return;
  }

  // 注意：原代码里的language应该是lang，这里修正了笔误
  window.location.replace('https://example.com' + lang);
}

checkForCountry();

步骤2：给手动切换按钮添加存储逻辑

假设你有切换到英文的按钮，给它添加点击事件来记录用户选择：

// 示例：切换到英文版本的按钮点击事件
document.getElementById('switch-to-en-btn').addEventListener('click', () => {
  // 记录用户手动选择英文的操作
  localStorage.setItem('userSelectedLang', 'en');
  // 跳转到英文版本
  window.location.href = 'https://example.com';
});

// 同理，切换到其他语言的按钮也可以添加对应逻辑（可选）
document.getElementById('switch-to-de-btn').addEventListener('click', () => {
  localStorage.setItem('userSelectedLang', 'de');
  window.location.href = 'https://example.com/de/';
});

效果说明 #

• 首次访问的用户：没有localStorage记录，脚本会自动跳转到对应语言版本
• 手动切换语言的用户：localStorage会持久保存选择，后续访问时脚本会优先尊重这个选择，不再强制跳转
• 原有的循环跳转逻辑依然生效，避免自动跳转时陷入死循环

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