セットクッキー、ページのロード

Question

上のクッキーからbodyclass私は

を.blackoutするために身体のクラスを設定し、ボタンを持って、私はクッキーを設定するjs-cookie を使用していますし、次のコードは、私のボタンに関連付けられています。

<script> 
$('#boToggle').on('click', function(e) { 
    $('body').toggleClass('blackout'); 
}); 
</script> 

は私が把握することはできませんすることは.toggleClassでクッキーを設定するには、上記のリンクからCookies.set('name', 'value');を使用する方法と、クッキーから取得し、身体クラスにそれを適用する方法です。

ありがとうございます！

Answer 1

セッション間でトグルされたクラスの状態を維持したいと思うようですが、これはCookieで行うことができますが、おそらくlocalStorageに適しています。私が説明します完全を期すために

は、より良い、このquestionを参照してくださいクッキーとローカルストレージの違いを理解するためにクッキー

で

に近づくの両方が、私は正直にあなたがいずれかで行くことができると思いますアプローチ。この場合、ローカルストレージがクッキーを超える利点の1つは、追加のライブラリを必要としないことです。

let state = Cookies.get('toggle'); 
$(body).toggleClass('.blackout', state) 

更新したスニペットを使ってローカルストレージ

let state = localStorage.getItem('toggle'); 
$(body).toggleClass('.blackout', state) 

で

var toggleLocalStorage = localStorage.getItem('toggle'); 
var toggleStatus = toggleLocalStorage ? toggleLocalStorage : false; 

$('#boToggle').on('click', function(e) { 
    $('body').toggleClass('blackout', toggleStatus); 
    localStorage.setItem('toggle' toggleStatus); 
});