Nasıl .toggleClass düğmesini tıklayarak farklı sayfalardaki etkilerini koruyabilirim?

Question

Kullanıcı tercihlerini bağlı olarak, arka plan/navbar/metin rengi için pozitif & negatif tema arasında tüm görünümünü değiştirmek için bir düğmeyi kullanan bir site geliştiriyorum. Ben basit toggleClass yöntemi ile ana sayfa yaptık: kullanıcı web sitesinin başka bir sayfayı yüklediğinde, bu gibi (daha önce seçilen tema ile açılacak şekilde

$(document).ready(function(){ 
    $('.switchButton').click(function(){ 
     $('.mainBg').toggleClass("bg-inv");  
    }); 
}); 

Nasıl yapabilir Bulunduğunuz sayfa negatifse, pozitif olana kadar hepsi de negatif olur)? Her bir sayfaya bir anahtar eklemeyi planlıyorum, ancak ikinci temayı kullanmak istediğiniz her seferinde hareket ettirmek çok sinir bozucu. Bir IF jquery işlevi hakkında düşünürdüm, ancak farklı sayfalar arasında nasıl kullanılacağını bilmiyorum.

Answer 1

Değeri bir çerezde kaydedebilir ve sayfalar arasında kalmasını sağlamak için her sayfaya yükleyebilirsiniz.

Answer 2

HTTP durumsuzdur. Bu, bağlantılar arasındaki verilerin kaydedilmediği ve her isteğin sunucudaki koda dayanarak taze olduğu anlamına gelir.

Verileri isteklere karşı kaydetmek isterseniz, isteği bağımlı olmayan bir yere kaydetmeniz gerekir. Bu, bir çerezde, oturum değişkeninde, bir veritabanında veya localstorage'da olabilir.

Çerezlere yalnızca JavaScript’ten doğrudan erişebilirsiniz, böylece en kolay bahisiniz budur.

Answer 3

class; adlı bir değişken oluşturduğunuzu varsayalım. Şimdi toggleClass işlevinde, a'un, bu durumda toggleClass, bg-inv öğesine geçirdiğiniz değişken olduğu class=a yazın. Şimdiile localStorage ürününüze class kaydedebilir ve localStorage['class'] veya localStorage.getItem('class')'u kullanarak istediğiniz zaman geri alabilirsiniz.

Answer 4

Ana sayfada, sessionStorage'da değeri kaydedebilir ve her sayfada sessionStorage değişkeninden alabileceğiniz değeri alabilirsiniz. Her sayfada

$(document).ready(function(){ 

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

      $('.mainBg').toggleClass("bg-inv"); 
      sessionStorage.class = "bg-inv"; 

    });  
}); 

değişken

$(document).ready(function(){ 
    if(typeof(Storage) !== "undefined") { 
      $('.mainBg').addClass(sessionStorage.class); 
    } 

});