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

Question

是否有任何解决方案，可以帮助我在页面刷新或移动到另一个子网站后保留当前选择的语言？

这是我的代码：

    // 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可以作为一种解决方案，用于跨浏览器会话保存数据。您可以使用会话存储来实现您的类，每次设置透明类时，您都可以将其添加到本地存储中。

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

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

 localStorage.removeItem('class');

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

localStorage.getItem('class');

Answer 2

这只是一个即时的想法，你可以在其上构建自己的解决方案：

$.fn.toggleTransparency = function () {
  if (localStorage[this] === undefined) {
    localStorage[this] = true
  } else {
    localStorage[this] = !localStorage[this]
  }
  localStorage[this]
    ? this.addClass('transparency')
    : this.removeClass('transparency')
}

// Usage:
$(selector).toggleTransparency()

Answer 3

我找到了这个解决方案：

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

    // English content hidden on load //

  engIco.addClass(localStorage.added);

  engIco.on('click', function() {
    switchEngTransparency();
  });

  function switchEngTransparency() {
    if (localStorage.added != 'transparency') {
      engIco.addClass('transparency', true);
      localStorage.added = 'transparency';
    } else {
      engIco.addClass('transparency', false);
      localStorage.added = '';
    }
  };

  function deactivateOppositeIcon() {
    if (!engIco.hasClass('transparency')) {
      polIco.addClass('transparency');
    } else {
      polIco.removeClass('transparency');
    }
  };

  deactivateOppositeIcon();

.transparency {
opacity: 0.5;
}

但问题是-当我点击engIco时，透明度只有在刷新站点或移动到另一个子站点后才会改变。它不会立即改变。有什么办法解决这个问题吗？