根据数据属性设置cookie答案

【问题标题】：Set cookie based on data attribute根据数据属性设置cookie
【发布时间】：2019-03-01 11:12:16
【问题描述】：

我想设置一个 cookie，其数据属性的值定义为锚链接。示例：

<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。

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

我该怎么办？

【问题讨论】：

请详细说明。你也在使用纯 JS 还是 jQuery？到目前为止，您尝试过什么？
我们可能需要查看您对 setCookie 函数的定义，但据我所知，它需要两个字符串作为输入，而 data-lang_here 是一个字符串。所以也许你只需要摆脱它周围的''。

标签： javascript html setcookie jquery-cookie

【解决方案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});
     });

【讨论】：

【解决方案2】：

html

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

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

【讨论】：