jquery slideUp / slideDown cookie

Question

我的網站上有一個開放的div，一條歡迎消息，其中有一個slideUp / slideDown切換，因此用戶可以單擊“關閉”並向上滑動div。 但是，每次你登陸這個頁面時，它都是打開的......我想對它應用一個cookie，所以如果用戶按下slideUp切換，它會添加一個cookie並將其保持在display:none 。

到目前為止，這是我的jQuery代碼...我希望使用cookie插件，這可能會使事情變得更容易？

var welcome_active = false;
$('.welcome-container .trigger span').click(function() {
    if (!welcome_active) {
        $('.welcome-container .content').slideUp('slow', function() {});
        $(this).find('span').removeClass('ss-navigatedown');
        $(this).find('em').html('About');
        $(this).find('span').addClass('ss-navigateup');
        welcome_active = true;
        console.log('test');
    } else {
        $('.welcome-container .content').slideDown('slow', function() {});
        $(this).find('span').removeClass('ss-navigateup');
        $(this).find('em').html('Close');
        $(this).find('span').addClass('ss-navigatedown');
        welcome_active = false;
    }
});

任何想法，如果這是可能的？

謝謝

Answer 1

應該是這樣的，使用你提到的cookie插件，但如果你不必支持舊的瀏覽器，你也可以使用本地存儲：

var welcome_active = false;
if($.cookie('welcome_active')=='1'){
  $('.welcome-container .content').slideUp('slow', function() {});
  $(this).find('span').removeClass('ss-navigatedown');
  $(this).find('em').html('About');
  $(this).find('span').addClass('ss-navigateup');
  welcome_active = true;
}
$('.welcome-container .trigger span').click(function() {
  if (!welcome_active) {
    $('.welcome-container .content').slideUp('slow', function() {});
    $(this).find('span').removeClass('ss-navigatedown');
    $(this).find('em').html('About');
    $(this).find('span').addClass('ss-navigateup');
    welcome_active = true;
    console.log('test');
    $.cookie('welcome_active', '1', { expires: 7 });
  } else {
    $('.welcome-container .content').slideDown('slow', function() {});
    $(this).find('span').removeClass('ss-navigateup');
    $(this).find('em').html('Close');
    $(this).find('span').addClass('ss-navigatedown');
    welcome_active = false;
    $.cookie('welcome_active', '0', { expires: 7 });
  }
});

Answer 2

您只需編輯document.cookie即可添加cookie

例如：

document.cookie="slideState=up";

接下來，您只需閱讀document.cookie並解析字符串即可獲得您的價值。

我建議你使用localstorage它簡單而有效，並且它具有非常好的兼容性