如何将 localStorage 添加到我的多语言网站/Jquery/JSON

Question

您好，

我使用 jquery 编写了一个多语言网站。翻译工作完美。没有错误，但每当我刷新浏览器或单击链接时，页面都会恢复到原来的形式。

此代码来自 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 或 Cookies 吗？这种翻译的设计对我来说非常棒，因为它不会中断网站的 URL。

---

Answer 1

1.首先检查本地存储中存储的语言 2.将点击的按钮语言保存在本地存储中 试图解释如何在 cmets

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);
      });

    });

你可以玩Here