How can I make the language-picker button save the value after it is clicked and the page is reloaded?

Question

a JQuery newbie here.

The following jquery code for a language-picker (to be used on multi-language website, let's say) should show the active language clicked by user. The problem is that after the webpage reloads in the chosen language, the language picker defaults to the language in the div tag. It doesn't show the language picked by user.

I kind of tried setting up a cookie and doing something with it. But I couldn't make it work. How can I edit the code so that the language picker button shows the active language icon picked by user?

Here is the code in jquery. (the website backend/frontend is built in nodejs/ejs+jquery)

 $("#lang-menu").hover(
    function(){
        $(this).addClass("cls-border-lang");
        $(this).children().eq(0).addClass("cls-borderbottom-lang");
              $("#lang-menu ul").stop().slideToggle(100);
    },
    function(){
                $(this).removeClass("cls-border-lang");
        $(this).children().eq(0).removeClass("cls-borderbottom-lang");
        $("#lang-menu ul").stop().slideToggle(100);  
    }
  );
  /// click languages
  $("#lang-menu ul li").on("click", function(){
        //select lang and apply changes
      // $lang= $(this).html();
        $("#lang-menu div").html($lang);
  });
}

Answer 1

If you do not want to use cookies, you could store the default language in the Session Storage.

If you choose to go this route, you would have to edit your on-click handler to overwrite the selected language variable stored in your Session Storage and also edit your code that renders the selected language to always display what is stored in Session Storage.