如何实现F5刷新页面后保持选中的语言国旗图标状态？

问题描述 #

选择韩语后国旗图标可正常切换，但按下F5刷新页面时，图标会恢复为英文状态，需要实现刷新后保留所选语言的国旗显示状态。

问题原因 #

1. 当前updateLanguage函数仅更新页面文本内容，未同步更新顶部国旗图标的src属性；
2. 页面通过jQuery.load()异步加载header.html，window.load事件触发时header可能还未加载完成，导致无法找到#flags元素进行状态恢复；
3. 中文、日文选项未绑定状态保存的点击事件，无法持久化这两种语言的选择状态。

解决方案 #

1. 完善updateLanguage函数，同步国旗状态 #

修改updateLanguage函数，根据本地存储的语言值对应更新国旗图标：

function updateLanguage() {
  const selectedLanguage = getLanguagePreference();
  // 同步更新国旗图标
  const flagElement = document.getElementById('flags');
  if (flagElement) {
    let flagSrc = 'assets/img/flags/en.svg';
    switch(selectedLanguage) {
      case 'zh':
        flagSrc = 'assets/img/flags/zh.svg';
        break;
      case 'ja':
        flagSrc = 'assets/img/flags/ja.svg';
        break;
      case 'ko':
        flagSrc = 'assets/img/flags/ko.svg';
        break;
      default:
        flagSrc = 'assets/img/flags/en.svg';
    }
    flagElement.src = flagSrc;
  }

  // 更新页面文本内容
  if (selectedLanguage === 'ko') {
    document.getElementById("description").innerHTML = "Show Korean Text";
  } else {
    document.getElementById("description").innerHTML = "Show English Text";
  }
}

2. 调整代码执行时机，确保header加载完成后恢复状态 #

将状态恢复逻辑放在jQuery.load()的回调中执行，保证header加载完成后再操作DOM：

$(function(){
  $("#includedContent").load("header.html", function() {
    // header加载完成后执行状态恢复
    updateLanguage();
  });
});

3. 为所有语言选项绑定状态保存事件 #

修改header.html中的下拉选项，给中文、日文添加onclick事件，确保所有语言选择都能持久化：

<ul>
  <li onclick="setLanguagePreference('zh', 'assets/img/flags/zh.svg'); updateLanguage();">
    <a href="#"><span><img src="assets/img/flags/zh.svg" class="flags" alt="Chinese"> Chinese - 中文</span></a>
  </li>
  <li onclick="setLanguagePreference('ja', 'assets/img/flags/ja.svg'); updateLanguage();">
    <a href="#"><span><img src="assets/img/flags/ja.svg" class="flags" alt="Japanese"> Japanese - 日本語</span></a>
  </li>
  <li onclick="setLanguagePreference('en', 'assets/img/flags/en.svg'); updateLanguage();">
    <a href="#"><span><img src="assets/img/flags/en.svg" class="flags" alt="English"> English - US</span></a>
  </li>
  <li onclick="setLanguagePreference('ko', 'assets/img/flags/ko.svg'); updateLanguage();">
    <a href="#"><span><img src="assets/img/flags/ko.svg" class="flags" alt="Korean"> Korean - 중국어</span></a>
  </li>
</ul>

完整修改后代码片段 #

修改后的header.html（下拉菜单部分） #

<li class="dropdown">
  <a href="#"><span><img id="flags" src="assets/img/flags/en.svg" class="flags" alt="English"></span> <i class="bi bi-chevron-down"></i></a>
  <ul>
    <li onclick="setLanguagePreference('zh', 'assets/img/flags/zh.svg'); updateLanguage();">
      <a href="#"><span><img src="assets/img/flags/zh.svg" class="flags" alt="Chinese"> Chinese - 中文</span></a>
    </li>
    <li onclick="setLanguagePreference('ja', 'assets/img/flags/ja.svg'); updateLanguage();">
      <a href="#"><span><img src="assets/img/flags/ja.svg" class="flags" alt="Japanese"> Japanese - 日本語</span></a>
    </li>
    <li onclick="setLanguagePreference('en', 'assets/img/flags/en.svg'); updateLanguage();">
      <a href="#"><span><img src="assets/img/flags/en.svg" class="flags" alt="English"> English - US</span></a>
    </li>
    <li onclick="setLanguagePreference('ko', 'assets/img/flags/ko.svg'); updateLanguage();">
      <a href="#"><span><img src="assets/img/flags/ko.svg" class="flags" alt="Korean"> Korean - 중국어</span></a>
    </li>
  </ul>
</li>

修改后的index.html脚本部分 #

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="jquery.js"></script>
<script>
  $(function(){
    $("#includedContent").load("header.html", function() {
      // header加载完成后恢复语言状态
      updateLanguage();
    });
  });
</script>

</head>
<body>
etc...
<h1 id="description">Show English Text</h1>
</body>

<script>
  function setLanguagePreference(language, flagSrc) {
    localStorage.setItem('selectedLanguage', language);
    const flagElement = document.getElementById('flags');
    if (flagElement) {
      flagElement.src = flagSrc;
    }
    updateLanguage();
  }

  function getLanguagePreference() {
    const selectedLanguage = localStorage.getItem('selectedLanguage');
    return selectedLanguage ? selectedLanguage : 'en';
  }

  function updateLanguage() {
    const selectedLanguage = getLanguagePreference();
    // 同步更新国旗图标
    const flagElement = document.getElementById('flags');
    if (flagElement) {
      let flagSrc = 'assets/img/flags/en.svg';
      switch(selectedLanguage) {
        case 'zh':
          flagSrc = 'assets/img/flags/zh.svg';
          break;
        case 'ja':
          flagSrc = 'assets/img/flags/ja.svg';
          break;
        case 'ko':
          flagSrc = 'assets/img/flags/ko.svg';
          break;
        default:
          flagSrc = 'assets/img/flags/en.svg';
      }
      flagElement.src = flagSrc;
    }

    // 更新页面文本
    if (selectedLanguage === 'ko') {
      document.getElementById("description").innerHTML = "Show Korean Text";
    } else {
      document.getElementById("description").innerHTML = "Show English Text";
    }
  }
</script>

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