jquery 쿠키를 사용하여 div 토글 상태를 저장하십시오.

Question

이 방법을 구현하는 방법이 있지만 모든 유사한 게시물 중 아무 것도 볼 수없는 간단한 예제가 있습니다. 나는 단순히 "marketing-message-global"토글 상태의 값을 쿠키에 저장하려고합니다. 사용자가 "hide-marketing-message-btn"을 클릭하면 토글 된 상태가 쿠키에 저장됩니다. 사용자가 페이지를 새로 고치면 저장된 토글 상태가 사용되며 토글 된 div를 숨 깁니다.

<div id="marketing-message-global"> 
</div> 
<div id="hide-marketing-message-btn"> 
</div> 

$(document).ready(function() { 
if $('#hide-marketing-message-btn").clicked() 
{ 
    $("#marketing-message-global").hide(); 
    $.cookie("toggle-state") == true; 
} 

if ($.cookie("toggle-state") == true) 
{ 
    $("#marketing-message-global").hide(); 
} 
else if ($.cookie("toggle-state") == false) 
{ 
$("#marketing-message-global").show(); 
} 
}); 
</script> 

Answer 1

는 내가이 일을해야한다고 생각 JQuery와 쿠키 플러그인 (https://github.com/carhartl/jquery-cookie)

$(function(){ 
     if($.cookie){ 
      //By default, if no cookie, just display. 
      $("#marketing-message-global").toggle(!(!!$.cookie("toggle-state")) || $.cookie("toggle-state") === 'true'); 
    } 

    $('#hide-marketing-message-btn').on('click', function(){ 
     $("#marketing-message-global").toggle(); 
     //Save the value to the cookie for 1 day; and cookie domain is whole site, if ignore "path", it will save this cookie for current page only; 
     $.cookie("toggle-state", $("#marketing-message-global").is(':visible'), {expires: 1, path:'/'}); 
}); 

}); 

Answer 2

을 사용 :

1) 당신이 다른 어떤 사건에 의해 쿠키 설정하려면 :

$(document).ready(function() { 
    if ($("#hide-marketing-message-btn").prop("hidden") == "hidden") 
    { 
     $("#marketing-message-global").hide(); 
     $.cookie("toggle-state") == true; 
    } 
    else 
    { 
     // ... 
    } 
}); 

을

2) div를 클릭하고 한번에 토글을 수행하여 쿠키 설정 :

$(document).ready(function() { 
    $("#hide-marketing-message-btn").click(function() { 
     if ($("#hide-marketing-message-btn").prop("hidden") == "hidden") 
     { 
      $("#marketing-message-global").hide(); 
      $.cookie("toggle-state") == true; 
     } 
     else 
     { 
      // ... 
     } 
    }); 
});