jQueryとjquery.cookie.jsを使って背景色の変更を一定期間保持させる方法

背景色を変更するボタンを設置し、色を変更したらブラウザを閉じても一定期間は変更内容を反映させたままにする方法をご紹介いたします。

簡単なデモページも用意しましたので、挙動については以下デモページをご参照ください。

デモページを見る

jQueryとjquery.cookie.jsを使って背景色の変更を一定期間保持させる方法

今回は、デモページのようにbodyの背景色を「赤」「黄」「青」に変更できるボタンを設置します。

ステップ1. 背景色変更ボタンのマークアップ

HTMLはシンプルです。以下のように、背景色変更ボタンと現在の背景色を表示する箇所をマークアップします。

<div id="bgcolor-area">
  <span id="bgcolor-red">Red</span>
  <span id="bgcolor-yellow">Yellow</span>
  <span id="bgcolor-blue">Blue</span>
</div>
<p>現在の背景色：<span id="bgcolor"></span></p>

背景色変更ボタンはspan要素で記述していますが、button要素やdiv要素でも構いません。

ステップ2. CSSでボタン等の装飾を整える

続いて、CSSでボタンなどの装飾を整えます。以下は一例です。

#bgcolor-area span {
  margin: 0 1em;
  padding: 0.5em 1em;
  border: 1px solid #000;
  cursor: pointer;
}

#bgcolor-red {
  background-color: #FA5858;
}

#bgcolor-yellow {
  background-color: #F7FE2E;
}

#bgcolor-blue {
  background-color: #9ab3fb;
}

CSSはサイトに合わせて変更してください。

ステップ3. jQuery本体とjquery.cookie.jsを読み込む

jQuery本体とjquery.cookie.jsを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

jquery.cookie.jsはGitHubからダウンロードして、サーバーに設置してもOKです。

ステップ4. 背景色の変更と変更内容を保持するためのスクリプトを記述

最後に、背景色の変更と変更内容を一定期間保持するためのスクリプトを記述します。記述する場所は</body>の直前で大丈夫ですが、jQuery本体とjquery.cookie.jsの読み込みよりも後ろに記述します。

<script>
jQuery( function() {
  backgroundColor();
  jQuery( '#bgcolor-red' ).click( function () {
    backgroundColor( '#FA5858' );
  });
  jQuery( '#bgcolor-yellow' ).click( function () {
    backgroundColor( '#F7FE2E' );
  });
  jQuery( '#bgcolor-blue' ).click( function () {
    backgroundColor( '#9ab3fb' );
  });
  function backgroundColor( $backgroundColor ) {
    if( $backgroundColor == undefined ){
      var $backgroundColor = jQuery.cookie( 'backgroundColor' );
      if( $backgroundColor == undefined ){
        var $backgroundColor = '#F7FE2E';
      }
    }
    jQuery( '#bgcolor' ).html( $backgroundColor );
    jQuery.cookie( 'backgroundColor', $backgroundColor, { expires: 7 } );
    jQuery( 'body' ).css( { 'backgroundColor': $backgroundColor } );
  }
});
</script>

「jQuery( ‘#bgcolor-red’ ).click( function ()」などの前半部分で、ボタンをクリックした時に背景色を変更する処理を行っています。

「function backgroundColor( $backgroundColor )」では、Cookieがない場合のデフォルトの背景色(今回は黄色)を指定します。「jQuery( ‘#bgcolor’ ).html( $backgroundColor );」で、現在の背景色を表示しています。

「jQuery.cookie( ‘backgroundColor’, $backgroundColor, { expires: 7 } );」では、変更内容を保持する期間を指定します。上記の場合”7日”になっているので、期間を変更したい場合は「expires: 7」の数値を変えます。

あとがき

今回はbodyの背景色を変更していますが、「jQuery( ‘body’ ).css( { ‘backgroundColor’: $backgroundColor } );」の部分で、特定の要素を指定すればその部分の背景色を変更することができます。