jquery.cookie.jsで設定したcookieが外れてしまう場合の対処法

今回はjquery.cookie.jsを使ってcookieを保存したけどページ遷移をしたときにcookieが外れてしまうという現象があったのでそちらについての対処法になります。

ページ遷移をしたときにcookieがはずれる

次のような現象がありました。

とあるページでクッキーを保存、他のページに飛んだときにクッキーが空になってしまう

流れとして下記になります。

まずページを開いたときにクッキーを保存します。

$.cookie('page', 'test');

ところがデフォルトだとブラウザを閉じたときにクッキーが削除されるということなのでこれに「expires」オプションで日数指定しました。

$.cookie('page', 'test', { expires: 1 });

ですが変わらずページ遷移をしたところクッキーが消えてしまいました。

よく調べてみると階層が変わるページ遷移を伴う場合にcookieのパスを明示的に指定しておかないと
外れてしまうようです！

そこで「path」オプションでパスを指定しました。

$.cookie('page', 'test', { expires: 1, path: '/' });

これで階層が変わるページ移動でもクッキーが消えなくなりました。

解決しました。

おさらいとしてjquery.cookie.jsの書き方を紹介していきます。

$.cookie('名前');

$.cookie('名前','値');

$.removeCookie( "名前" );

jquery.cookie.jsのバージョン1.4.1を読む場合は下記になります。

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