如何用jQuery实现多语言切换并在页面跳转后保持选中语言状态？

这个问题我之前帮好几个开发者搞定过——核心原因就是页面跳转/刷新后，浏览器相当于重新加载了整个站点，之前选中的语言状态没被持久化保存，所以又回到默认的泰语了。下面给你几个实用的解决方案，按需选就行：

方案1：用localStorage持久化语言设置（最常用） #

把用户选中的语言存在浏览器的localStorage里，每次页面加载时先读取这个值，再设置当前语言，简单又可靠。

实现步骤： #

1. 语言切换按钮的点击事件里，新增存储逻辑：

// 假设这是你的语言切换处理函数
function switchLanguage(lang) {
  // 这里保留你原本更新页面内容的逻辑
  updatePageContent(lang);
  // 将选中的语言存入localStorage
  localStorage.setItem('preferredLanguage', lang);
  // 同步更新按钮激活状态（比如给选中按钮加active类）
  document.querySelectorAll('[data-lang]').forEach(btn => btn.classList.remove('active'));
  document.querySelector(`[data-lang="${lang}"]`).classList.add('active');
}

2. 每个页面初始化时（DOM加载完成后），读取存储的语言值：

document.addEventListener('DOMContentLoaded', function() {
  // 优先用存储的语言，没有则用默认泰语
  const savedLang = localStorage.getItem('preferredLanguage') || 'th';
  // 设置当前页面语言
  updatePageContent(savedLang);
  // 激活对应的语言按钮
  document.querySelector(`[data-lang="${savedLang}"]`).classList.add('active');
});

注意：如果用户清除浏览器缓存，这个设置会丢失，但绝大多数日常场景下完全够用。

方案2：用URL参数传递语言（适合分享带语言的链接） #

如果希望用户分享链接时，对方打开也是相同的语言，用URL参数更合适，比如yourwebsite.com/about?lang=en。

实现步骤： #

1. 语言切换时修改URL参数：

function switchLanguage(lang) {
  updatePageContent(lang);
  // 修改当前URL的lang参数，不刷新页面
  const url = new URL(window.location.href);
  url.searchParams.set('lang', lang);
  window.history.pushState({}, '', url);
  // 更新按钮激活状态
  document.querySelectorAll('[data-lang]').forEach(btn => btn.classList.remove('active'));
  document.querySelector(`[data-lang="${lang}"]`).classList.add('active');
}

2. 页面初始化时解析URL参数：

document.addEventListener('DOMContentLoaded', function() {
  const urlParams = new URLSearchParams(window.location.search);
  const savedLang = urlParams.get('lang') || 'th';
  updatePageContent(savedLang);
  document.querySelector(`[data-lang="${savedLang}"]`).classList.add('active');
});

好处：链接可以携带语言状态；缺点：如果用户直接输入不带参数的地址，会回到默认语言。

方案3：结合Cookie存储（适合服务端渲染场景） #

如果你的网站是服务端渲染（比如PHP、Node.js），用Cookie更合适——服务端可以直接读取Cookie值，在渲染页面时就输出对应语言的内容，避免页面先显示默认语言再切换的闪烁问题。

前端实现代码： #

// 设置语言Cookie，有效期30天
function setLanguageCookie(lang, days = 30) {
  const date = new Date();
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  const expires = "expires=" + date.toUTCString();
  document.cookie = `preferredLanguage=${lang}; ${expires}; path=/`;
}

// 语言切换函数
function switchLanguage(lang) {
  updatePageContent(lang);
  setLanguageCookie(lang);
  document.querySelectorAll('[data-lang]').forEach(btn => btn.classList.remove('active'));
  document.querySelector(`[data-lang="${lang}"]`).classList.add('active');
}

// 读取Cookie中的语言
function getLanguageCookie() {
  const name = "preferredLanguage=";
  const decodedCookie = decodeURIComponent(document.cookie);
  const ca = decodedCookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) === ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) === 0) {
      return c.substring(name.length, c.length);
    }
  }
  return 'th';
}

// 页面初始化
document.addEventListener('DOMContentLoaded', function() {
  const savedLang = getLanguageCookie();
  updatePageContent(savedLang);
  document.querySelector(`[data-lang="${savedLang}"]`).classList.add('active');
});

如果是服务端渲染，比如Node.js/Express，你可以直接读取req.cookies.preferredLanguage来决定渲染哪个语言的模板。

额外注意事项 #

• 不管用哪种方案，一定要同步更新语言切换按钮的激活状态，比如给选中的按钮添加active类，让用户直观看到当前选中的语言。
• 如果你的导航菜单是静态链接，用URL参数方案时，要确保每个菜单链接都带上?lang=${currentLang}；用localStorage/Cookie方案的话，页面加载时会自动读取状态，不用改链接。

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