javascript - 如何在页面刷新或移动到另一个 HTML 子网站时保持 ToogleClass() 状态？

Question

我的页面有几个 .html 子页面。每个页面上都有两个用于更改语言的“按钮”。有没有任何解决方案可以帮助我在页面刷新或移动到另一个子网站后保留当前选择的语言？

这是我的代码:

    // Language icons //
  var polIco = $('.language_ico_container').find('img').first();
  var engIco = $('.language_ico_container').find('img').last();

  engIco.toggleClass('transparency');

  function checkTransparency() {
    engIco.click(function () {
      $(this).toggleClass('transparency');
      if (engIco.hasClass('transparency')) {
        polIco.removeClass('transparency');
      } else {
        polIco.addClass('transparency');
      }
    });
    polIco.click(function () {
      $(this).toggleClass('transparency');
      if (polIco.hasClass('transparency')) {
        engIco.removeClass('transparency');
      } else {
        engIco.addClass('transparency');
      }
    });
  };
  // Call function checking transparency in language icons //
  checkTransparency();

  // English & Polish content selection //
  var languagePL = $('.pl');
  var languageEN = $('.eng');

  languageEN.toggleClass('hidden');

  function changeLanguage() {
    engIco.click(function () {
      languageEN.toggleClass('hidden');
      languagePL.toggleClass('hidden');
    });

    polIco.click(function () {
      languageEN.toggleClass('hidden');
      languagePL.toggleClass('hidden');
    });
  };
  // Call function changing content language
  changeLanguage();

和 CSS 类:

    .hidden {
    display: none;
}

    .transparency {
    opacity: 0.5;
}

Answer 1

LocalStorage 是一种用于跨浏览器 session 保存数据的解决方案。您可以使用 session 存储来实现您的类，每次设置透明度类时，您都可以将其添加到本地存储中。

localStorage.setItem('class','transparency');

当您删除该类时，您还可以将其从本地存储中删除

 localStorage.removeItem('class');

当页面刷新时，您可以从 localStorage 设置类

localStorage.getItem('class');