JavaScriptでcookieを使用するのは意外と面倒ですが、jquery.cookie.jsを利用することで、cookieを簡単に扱えます。

jquery.cookie.jsこちらからダウンロードできます。

以下がhtmlの記述例です。JQueryのプラグインになりますので、jQueryとセットで利用します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>

cookieの保存に関しては以下のように記述します。

$.cookie("KEY", "VALUE", { expires: 7 });

KEYには保存したいcookieの名前、VALUEには値を入れます。

{}の中は、optionが指定できます。

※有効期限の指定もできます。これが設定されていない場合は、ブラウザを閉じたタイミングで削除されます。

optionのパラメータ内容は以下になります。

  • expires → 有効期限(日数)
  • path → 有効なパス(ドメイン全体で利用したい場合は’/’を設定)
  • domain → 有効なドメイン
  • secure → HTTPS接続の場合のみにcookieを送信(デフォルトはfalse)

cookieの取得は下記になります。

※保存時に設定したKEYを元に取り出す。

$.cookie("KEY");

cookieの削除は下記になります。

※保存時に設定したKEYを元に取り出す。

$.removeCookie("KEY");

※パスを指定する場合は下記になります。

$.removeCookie("KEY", { path: "/" });