基于jQuery与JSON实现多语言网站，如何刷新页面保留选中语言？

这个问题很常见，核心原因是你当前的实现没有持久化用户的语言选择——页面刷新后，之前的选择就丢失了，所以会回到默认的英文。我们可以用浏览器的localStorage来存储用户的语言偏好，它能在浏览器会话间保持数据（除非用户手动清除缓存）。

下面是修改后的完整代码，我会一步步解释改动点：

修改后的JavaScript代码 #

var arrLang = {
  "en-gb": {
    "HOME": "Home",
    "ABOUT": "About Us",
    "CONTACT": "Contact Us",
  },
  "zh-tw": {
    "HOME": "首頁",
    "ABOUT": "關於我們",
    "CONTACT": "聯絡我們",
  }
};

$(document).ready(function() {
  // 优先读取localStorage中保存的语言，没有则用默认的en-gb
  var lang = localStorage.getItem("selectedLanguage") || "en-gb";
  updateLanguage(lang);
});

// 封装更新页面文本的函数，避免重复代码
function updateLanguage(lang) {
  $(".lang").each(function(index, element) {
    $(this).text(arrLang[lang][$(this).attr("key")]);
  });
}

// 切换语言并保存到localStorage
$(".translate").click(function() {
  var lang = $(this).attr("id");
  // 保存选择的语言到localStorage
  localStorage.setItem("selectedLanguage", lang);
  updateLanguage(lang);
});

HTML代码（无需修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="translate" id="en-gb">English</button>
<button class="translate" id="zh-tw">Chinese</button>
<ul>
  <li class="lang" key="HOME"></li>
  <li class="lang" key="ABOUT"></li>
  <li class="lang" key="CONTACT"></li>
</ul>

关键改动说明 #

• 页面初始化时读取存储：在$(document).ready里，先尝试从localStorage.getItem("selectedLanguage")获取用户之前选择的语言，如果没有（比如第一次访问），就用默认的"en-gb"。
• 封装更新函数：把原来重复的文本更新逻辑抽成updateLanguage函数，让代码更简洁易维护。
• 切换时保存语言：点击切换按钮时，除了更新页面文本，还要用localStorage.setItem把当前选择的语言存起来，这样下次页面加载时就能读取到。

这样修改后，用户切换语言后，即使刷新页面或者跳转到其他同域名页面，都会自动加载之前选择的语言。

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