[英]Is there a way to save click event on toggle state with local/session storage using jquery
我有一個圖標來切換一個彈出式div但我希望div保持隱藏,如果用戶在頁面上關閉它,那么即使用戶導航到另一個頁面也應該應用隱藏狀態。 如何使用本地/會話存儲實現此目的?
<section class="floating-cta">
<div class="qq-float-cta">
<a href="#" class="cta-callnow">
<div class="cta-top"><h3>Call now on 012 345 6789</h3></div>
<p>For an accurate, immediate response </p>
</a>
<a href="#" class="cta-getquote">
<div class="cta-bottom"><h3>Get your quote</h3></div>
<p>Guaranteed response in 10 minutes within business hours.</p>
</a>
</div>
</section>
<i class="fa fa-times-circle-o"></i>
<script>
$('.fa-times-circle-o').click(function(){
$('.floating-cta').fadeToggle("slow");
$("i",this).toggleClass("fa fa-times-circle-o fa fa-commenting")
});
</script>
我希望當用戶關閉該部分時,當他/她進入另一個頁面並且如果他/她想通過再次單擊該圖標來顯示它時,它應該保持關閉。
你應該使用cookies
。
像這樣的東西:
<script>
function setCookie(key, value) {
var expires = new Date();
expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000));
document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
}
function getCookie(key) {
var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
return keyValue ? keyValue[2] : null;
}
$('.fa-times-circle-o').click(function(){
$('.floating-cta').fadeToggle("slow");
$("i",this).toggleClass("fa fa-times-circle-o fa fa-commenting");
setCookie('hide_popup', '1');
});
if(getCookie('hide_popup') == '1'){
$('.floating-cta').hide();
}
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.