带有cookie的javascript onclick函数

例如，我有一个

标记，其中包含一个类，如下所示

<p class="badge">new</p>

---

问题是我如何使用cookies来记住用户之前已经单击过，这样css就会自动添加？

您最好使用

窗口。localStorage

 $(".badge").click(function(){
    $(".badge").css("display","none");
    localStorage.setItem('btnClicked', true);
 });

在加载文档时，您应检查用户之前是否单击了按钮，并采取相应的行动：

$(document).ready(function (){
    var clicked = localStorage.getItem("btnClicked");
    if(clicked){
       $(".badge").css("display","none");
    }
});

---

如果要使用Cookie，请尝试以下示例：

$(function() {

    function getCookie(name) {

        var matches = document.cookie.match(new RegExp(
        "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
        ));
        return matches ? decodeURIComponent(matches[1]) : undefined;
    }

    $('.badge').click(function(){

        var 
            cookieValue = +getCookie('counter'); // get cookie

        $('.badge').css('display' ,'none');

        document.cookie = 'counter=' + (cookieValue + 1); // setting a new value
    });

});

但是，正如大家所注意到的那样，您可以使用：

$(function() {

    $('.badge').click(function(){

        var 
            counter = +localStorage['counter']; // get counter's value from localStorage

        $('.badge').css('display' ,'none');

        localStorage['counter'] = (counter + 1) // setting a new value
    });

});

localStorage使您的代码更加紧凑（优雅：）

Web存储API提供了浏览器可以存储的机制 键/值对，比使用cookie更直观

Web存储中的两种机制如下所示：

• 会话存储为页面会话期间可用的每个给定来源维护一个单独的存储区域（只要 当浏览器打开时（包括页面重新加载和恢复）

• localStorage执行相同的操作，但即使在浏览器关闭和重新打开时也会保持不变

sessionStorage

类似于

localStorage

，唯一的区别是，虽然localStorage中存储的数据没有过期设置，但sessionStorage中存储的数据在页面会话结束时会被清除。

您可以使用：-

创建过期cookie，7天后：

$.cookie('name', 'value', { expires: 7 }); 

阅读cookie：

$.cookie('name'); // => "value"

因此，您的代码可以像这样工作：-

$（“.badge”）。单击（函数（）{
$（“.badge”）.css（“显示”、“无”）；
$.cookie（'hide-badge'，true，{expires:7}）；
});
$（函数（）{
如果（$.cookie（'hide-badge'））
$（“.badge”）.css（“显示”、“无”）；
});

新建
您可以将其存储在本地存储器中并在加载时检索它。我只知道通过document.cookie=“username=jack”等字符串存储cookie；
$.cookie('name'); // => "value"