Как добавить localStorage на мой многоязычный сайт / Jquery / JSON

Question

Привет,

Я написал многоязычный веб-сайт, используя jquery. Переводчик работает отлично. Ошибок нет, но всякий раз, когда я обновляю sh браузер или щелкаю ссылку, страница возвращается к исходной форме.

Этот код взят из руководства YouTube, но нет объяснения, как добавить файлы cookie или localStorage в Это. Я делаю это в первый раз, и мне слишком сложно понять это самостоятельно.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    var arrLang = {
      'pl': {
        'home': 'Strona główna',
        'about': 'O nas',
        'contact': 'Kontakt',
        'gallery': 'Galeria',
        'callnow': 'Zadzwoń teraz i umów przeprowadzkę!'
      },
      'en': {
        'home': 'Home',
        'about': 'About',
        'contact': 'Contact',
        'gallery': 'Gallery',
        'callnow': 'Call now and sign up!'
      }
    };

    $(function() {
      $('.translate').click(function() {
        var lang = $(this).attr('id');

        $('.lang').each(function(index, item) {
          $(this).text(arrLang[lang][$(this).attr('key')]);
        });
      });
    });
</script>




<button id="pl" class="translate">Polski</button>
<button id="en" class="translate">English</button>
<nav class="header-bottom-left">
    <ul>
        <a href="index.php#indexmain"><li class="lang" key="home">Strona główna</li></a>
        <a href="about.php#indexabout"><li class="lang" key="about">O nas</li></a>
        <a href="gallery.php#indexgallery"><li class="lang" key="gallery">Galeria</li></a>
        <a href="contact.php#indexcontact"><li class="lang" key="contact">Kontakt</li></a>
    </ul>
</nav>

Не могли бы вы помочь мне добавить localStorage или файлы cookie в этот код? Дизайн этого перевода просто великолепен для меня, потому что он не прерывает URL-адрес сайта.

---

Answer 1

1. сначала проверьте сохраненный язык в локальном хранилище 2. сохраните язык нажатой кнопки в локальном хранилище Пытался объяснить, как в комментариях

function translateLang(lang)
    {
        $('.lang').each(function(index, item) {
          $(this).text(arrLang[lang][$(this).attr('key')]);
        });
    }

    $(function() {
        //first check for stored language in localStorage i.e. fetch data from localStorage
        let stored_lang = localStorage.getItem("stored_lang");
        //if any then translate page accordingly
        if(stored_lang != null && stored_lang != undefined)
        {
            lang = stored_lang;
            translateLang(lang);
        }


      $('.translate').click(function() {
        var lang = $(this).attr('id');
         //on click store language to localStorage
        localStorage.setItem("stored_lang",lang);
        translateLang(lang);
      });

    });

Вы можете поиграть Здесь