在刷新頁面的localstorage對象上保存CSS類

我想要做的是在用戶刷新頁面時保存CSS樣式。這是我的jQuery代碼：在刷新頁面的localstorage對象上保存CSS類

$(function() { 

$("#slider").draggable({ 
    axis: 'x', 
    containment: 'parent', 
    drag: function(event, ui) { 
     if (ui.position.left > 230) { 
      $("#well").fadeOut(); 
      $("#well").addClass("disappear"); 
     } else { 
      // Apparently Safari isn't allowing partial opacity on text with background clip? Not sure. 
      // $("h2 span").css("opacity", 100 - (ui.position.left/5)) 
     } 
    }, 
    stop: function(event, ui) { 
     if (ui.position.left < 231) { 
      $(this).animate({ 
       left: 0 
      }) 
     } 
    } 
}); 

$('#slider')[0].addEventListener('touchmove', function(event) { 
    event.preventDefault(); 
    var el = event.target; 
    var touch = event.touches[0]; 
    curX = touch.pageX - this.offsetLeft - 73; 
    if(curX <= 0) return; 
    if(curX > 230){ 
     $('#well').fadeOut(); 
    } 
    el.style.webkitTransform = 'translateX(' + curX + 'px)'; 
}, false); 

$('#slider')[0].addEventListener('touchend', function(event) { 
    this.style.webkitTransition = '-webkit-transform 0.3s ease-in'; 
    this.addEventListener('webkitTransitionEnd', function(event) { this.style.webkitTransition = 'none'; }, false); 
    this.style.webkitTransform = 'translateX(0px)'; 
}, false);

}）;

當添加類「消失」時，即使頁面重新加載，我也想保留它。我找到了一個有用的文章here，但由於我是Javascript的初學者，我不確定如何在我的情況下使用它，如果有人能給我個性化的答案，我會非常高興。

在此先感謝！

來源

2013-08-16 Johannes Persson

$("#well").addClass("disappear");後添加

localStorage['wellClass'] = 'disappear';

，並在下面$(function() {行添加

previousWellClass = localStorage['wellClass']; 
if (previousWellClass) $('#well').addClass(previousWellClass);

來源

2013-08-16 14:05:10 akhanubis

太棒了，這只是一個很小的工作！然而，它似乎並沒有在iPhone上工作...儘管如此？ –

這將完成大部分的工作適合你。

var setClass = JSON.parse(localStorage.getItem('setClass')) || {}; 
$.each(setClass, function() { 
    $(this.selector).addClass(this.className); 
}); 
var addClassToLocalStorage = function(selector, className) { 
    setClass[selector + ':' + className] = { 
     selector: selector, 
     className: className 
    }; 
    localStorage.setItem('setClass', JSON.stringify(setClass)); 
}; 
var removeClassFromLocalStorage = function(selector, className) { 
    delete setClass[selector + ':' + className]; 
    localStorage.setItem('setClass', JSON.stringify(setClass)); 
};

然後，你可以這樣做：

$("#well").fadeOut(); 
$("#well").addClass("disappear"); 
addClassToLocalStorage('#well', 'disappear'); 
// remove it removeClassFromLocalStorage('#well', 'disappear');

FIDDLE

然後，如果你需要以後可以重新使用。

來源

2013-08-16 14:20:45 kalley

在刷新頁面的localstorage對象上保存CSS類

回答

相關問題