.toggleClassボタンをクリックすると、別のページにその効果を残すことができますか？

Question

私はボタンを使って、ユーザが好きなものに応じて、背景/ナビバー/テキストの色についてプラスの&ネガティブテーマの間で全体の外観を切り替えるサイトを開発してきました。私は、単純なtoggleClass方法でホームページをやった：ユーザーがウェブサイトの他のページをロードするとき、それはのように（以前に選択したテーマに開かれますように

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

は、どのように私はそれを作ることができ、あなたが入っているページがネガティブになっている場合は、ポジティブに変更するまでそれらのすべてがマイナスになります）。すべてのページにスイッチを挿入する予定ですが、2回目のテーマを使用するたびにフリックする必要があり、非常に迷惑です。 IF jquery関数について考えてみましたが、別のページ間でどのように使用するのか分かりません。

Answer 1

クッキーに値を保存し、ページ間で持続するように各ページに読み込むことができます。

Answer 2

HTTPはステートレスです。つまり、接続間のデータは保存されず、すべての要求はサーバー上のコードに基づく新しいものです。

リクエスト間でデータを保存する場合は、リクエストに依存しない場所にデータを保存する必要があります。これは、クッキー内、セッション変数内、データベース内、またはlocalstorageを使用することができます。

JavaScriptから直接アクセスできるのは、最も簡単な方法です。

Answer 3

変数をclass;としましょう。今すぐtoggleClass関数でclass=aを書きます。ここではaがtoggleClassに渡す変数です。この場合はbg-invです。今すぐあなたのローカルストレージにclassを保存してlocalStorage['class'] =classとし、必要に応じていつでも取得してください。localStorage['class']またはlocalStorage.getItem('class')これは役に立ちます。

Answer 4

ホームページでは、値をsessionStorageに保存することができ、各ページにsessionStorage変数から値を取得できます。すべてのページに

$(document).ready(function(){ 

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

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

    });  
}); 

あなたは好みを保存するためにクッキーを使用して、変数

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

});