頑張らない!でも諦めない!必死にならずにええかげん

jquery.cookie.jsを利用したCookie制御

   

Google or AdMax Promotion(it)

jquery.cookie.jsを利用するとJavaScriptを利用した煩雑なCookie制御を、
すっきりとさせることができます。
ここでは、jquery.cookie.jsを利用してcookieを設定、削除、取得の記述方法をご紹介します。

他のサイトで書かれている通りに実行しても、
うまく動作しませんでしたのでご紹介しておきます。

jquery.cookie.jsを利用したCookie制御

jquery.cookie.jsを利用するに当たっては、
jquery.js、jquery.cookie.jsを事前にダウンロードしておく必要があります。

jquery.js/jquery.cookie.jsのダウンロード

jquery.js、jquery.cookie.jsのダウンロードは以下から行えます。

jquery.js

jquery.jsは以下からダウンロード可能です。

Download jQuery | jQuery

中ほどの「Download the uncompressed, development jQuery 2.1.3」からダウンロードします。

01_jquery.jsのダウンロード

jquery.jsのダウンロード

 

クリックすると保存ダイアログが開き「jquery-2.1.3.js」のダウンロードが開始されます。

02_jquery.jsの保存

jquery.jsの保存

 

保存したらサーバーにアップロードするディレクトリなどに保存しておき、
後ほどアップロードします。

尚、jquery.jsはCDNから直接利用することも可能です。

 

jquery.cookie.js

jQuery Cookie | jQuery Plugin Registry

右上の[Download Now]をクリックして保存します。
現時点のバージョンは、1.4.1です。

03_jquery.cookie.jsのダウンロード

jquery.cookie.jsのダウンロード

 

「carhartl-jquery-cookie-v1.4.1-0-g7f88a4e.zip」ファイルのダウンロードが開始されます。

04_jquery.cookie.jsの保存

jquery.cookie.jsの保存

 

適宜保存し、保存したら解凍します。

解凍したフォルダ内の「jquery.cookie.js」を利用します。

05_jquery.cookie.js解凍フォルダ内

jquery.cookie.js解凍フォルダ内

 

jquery.js/jquery.cookie.jsの読み込み

それぞれのダウンロードしたファイルを、
公開ディレクトリ内の「js」ディレクトリへ配置したものとします。

(注意)
読み込む順番をjquery-2.1.3.js → jquery.cookie.jsの順で読み込ませます。

 

Cookie制御コード

今回は自己運営のサイトに自分がアクセスした場合には、
アクセス解析タグを出力しないという目的でcookieを利用します。

その為、一般のアクセスユーザーと自分の切り分けの為に、
自分のブラウザに対してのみ特定のcookieをセットします。

 

cookieの値をセットする

cookieの値をセットするには以下を利用します。

実際にセットする例としては以下のような感じになります。

ここではcookieのキーに対して「ninja」を、値に対しては「exclusion」をセットしています。
一般的には「ninja=exclusion」として設定した場合と同じです。

オプションには以下のように設定しています。

  • expires: 有効期限日数,
  • path: パスの指定(ドメイン配下すべてを示す),
  • domain: 対象ドメイン

 

cookieの値を参照する

設定したcookieの値を取得するには、以下のように記述します。

実際には以下のようになります。

 

値の設定と取得はすぐに上手くいくのですが、
削除がうまく動作しない場合があります。

cookieの値を削除する

cookieの削除では、以下のように記述します。

実際には以下のように設定します。

削除でも設定時と同じオプションを渡すことで削除が安定します。

 

実装例

上記の処理を実際にスクリプトとして導入する場合には、
関数化や外部化するなどするといいかもしれませんが。

 

上記では処理を記述していませんが、
ボタンをクリックした場合にクッキーを設定、削除といった動作をさせて、
自分のブラウザに対してのみ特定のクッキーを仕込んでおくことで、
アクセス解析などのタグを読み込まないように回避させることができます。

動作例は以下でご紹介しています。

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

cookie制御がうまくいかない時には、
削除処理も設定時と同じようにオプションを渡すとうまくいくかもしれません。

 

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

 - jQuery

  関連記事