根据数据属性设置cookie

Question

我想设置一个cookie，其中包含为锚链接定义的data属性的值。例：

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

使用案例：

• 用户单击更改语言按钮
• 弹出的语言模式显示五种不同的语言。每个链接都有不同的data-lang。
• 用户点击他们想要的语言，然后点击所选语言的“language-selectedis created with the value of thedata-lang”。

设置cookie：setCookie('language-selected','data-lang_here',7);

我该怎么做？

Answer 1

您可以使用jQuery-cookie插件。使用$.cookie('lang-selected')获取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});
     });

Answer 2

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=/";
}