Set cookie based on data attribute

Question

I want to set a cookie with the value of the data attribute defined to an anchor link. Example:

• <a href="#" data-lang="de">Deutsch</a>
• <a href="#" data-lang="fr">Français</a>

Use case:

• User click change language button
• Language modal pops up showing five different languages. Each link has a different data-lang.
• User clicks on what language they want and then a cookie called 'language-selectedis created with the value of thedata-lang` of the chosen lang.

Setting cookie: setCookie('language-selected','data-lang_here',7);

How would I go about this?

Answer 1

html

<a href="#" data-lang="de">Deutsch</a>
<a href="#" data-lang="fr">Français</a>

js

let anchors = document.querySelectorAll('a');
for (let anchor of anchors) {
    anchor.addEventListener("click", (event) => {
        let langValue = event.target.getAttribute('data-lang');
        setCookie("language-selected", langValue, 1); // expiration time is 1 day
    })
}


function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

Answer 2

You can use jQuery-cookie plugin. Use $.cookie('lang-selected') to get the cookie.

HTML

    <a href="#" data-lang="de">Deutsch</a>
    <a href="#" data-lang="fr">Français</a>

Jquery

    $("a").click(function($event){
      $event.preventDefault();
      let lang = $($event.target).attr('data-lang');
      $.cookie('language-selected', lang, {expires : 30});
     });