jQuery Cookieで保存期間を指定するには、オプションの「expires」を使用しますが、保存日数や保存時間、また保存する時間を使用しているデバイスの日時設定を基準とするかサーバの時間を基準にするか、といった保存方法にはいくつかパターンがあるのでそれぞれ紹介してみます。
「expires」オプションで日数指定
まずは基本となるjQuery Cookieのオプション「expires」を使って保存日数を指定する方法です。
※jQuery Cookieの基本的な使用方法は省かせていただきます。
$.cookie('名前', '値', { expires: 1 });
Cookieを保存するための「名前」と「値」を指定した後の{ expires: 1 }の値が保存する日数になります。
ここで「1」を指定すればCookieの保存期間は1日、「2」を指定すれば保存期間は2日になります。
「expires」で言う1日は24時間の保存期間ということになるので、「2」を指定すれば48時間、「3」を指定すれば72時間の保存期間ということになります。
この「expires」オプションを使って、ページロード時にモーダルウィンドウを1日に一度だけ表示するサンプルを作ってみました。
「expires」オプションでモーダルウィンドウを1日に一度だけ表示するサンプル
デバイスの日時設定を使用して保存する時間を指定
続いては、「expires」オプションで保存する期間を日数ではなく時間で指定する方法です。
ここで指定する時間／日時は、使用しているPCなどのデバイスの日時設定の時間を使用します。
◆ 10秒
let date = new Date();
date.setTime( date.getTime() + ( 10 * 1000 ));
$.cookie('名前', '値', { expires: date });
◆ 20分
let date = new Date();
date.setTime( date.getTime() + ( 20 * 60 * 1000 ));
$.cookie('名前', '値', { expires: date });
◆ 3時間
let date = new Date();
date.setTime( date.getTime() + ( 3 * 60 * 60 * 1000 ));
$.cookie('名前', '値', { expires: date });
秒、分、時で指定するには「new Date()」を使って「setTime()」でミリ秒制御をする必要があるので、その計算を変数でセットし「expires」で指定します。
※ミリ秒制御についてはQuiita記事を参考にさせてもらいました。
【参考記事】jquery.cookie.jsの使い方とCOOKIEの寿命(保存期間)を秒・分・時間で指定する方法 – Qiita
この時間指定でCookieの保存期間を10秒にして、ページロード時にモーダルウィンドウを表示、10秒間は再表示をしないように設定したサンプルを作ってみました。
デバイスの日時設定を使用してCookieの保存期間を10秒に設定するサンプル
サーバの時間を使用して保存する時間を指定
一つ前の時間指定をサーバの日時設定を使用して指定する方法です。
$.ajax({
type: 'GET'
}).done(function (data, status, xhr) {
let date = new Date(xhr.getResponseHeader('Date'));
date.setTime( date.getTime() + ( 1 * 60 * 60 * 1000 )); // 1時間
$.cookie('名前', '値', { expires: date });
});
サーバの日時設定を取得するには「new Date()」の「xhr.getResponseHeader(‘Date’)」を使用します。
サーバの時間を取得したあとは一つ前の時間指定の方法と変わらないので、秒、分、時の計算を変数でセットし「expires」で指定します。
このサーバの日時設定を使用した指定でCookieの保存期間を10秒にして、ページロード時にモーダルウィンドウを表示、10秒間は再表示をしないように設定したサンプルは以下になります。
サーバの日時設定を使ってCookieの保存期間を10秒に設定するサンプル
保存を日付が変わるまでの期間で指定（デバイスの日時設定を使用）
ここまでの期間指定は基本的に時間を使っての指定でしたが、1日の期間を日付が変わるまでの期間とする場合の指定についてです。
$(function () {
let date = new Date(),
nowTime = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
let cookie = $.cookie('名前');
if (cookie) {
if (!(cookie == nowTime)) {
// 実行させる処理を記述
$.cookie('名前', nowTime);
}
} else {
// 実行させる処理を記述
$.cookie('名前', nowTime);
}
});
ページロード時に「new Date()」で取得した日付を変数「nowTime」に「YYYY/MM/DD」の形式で取得しCookieの値にセットします。
ページを読み込むだびに日付を取得しCookieの値と比較して同じかそうでないかで処理を実行させるかさせないか分岐します。
※このパターンではデバイスの日時設定を使用しています。
このデバイスの日時設定を取得してCookieの値と比較して判別する処理のサンプルは以下になります。
デバイスの日時設定を判別してCookie処理を判別するサンプル
保存を日付が変わるまでの期間で指定（サーバの日時設定を使用）
一つ前の日付指定をサーバの時間を使用して指定する方法です。
$(function () {
$.ajax({
type: 'GET'
}).done(function (data, status, xhr) {
let date = new Date(xhr.getResponseHeader('Date')),
nowTime = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
let cookie = $.cookie('名前');
if (cookie) {
if (!(cookie == nowTime)) {
// 実行させる処理を記述
$.cookie('名前', nowTime);
}
} else {
// 実行させる処理を記述
$.cookie('名前', nowTime);
}
});
});
先ほどと同様にサーバの日時設定を取得するには「new Date()」の「xhr.getResponseHeader(‘Date’)」を使用します。
ページを読み込むだびに日付を取得しCookieの値と比較して同じかそうでないかで処理を実行させるかさせないか分岐します。
※このパターンではサーバの日時設定を使用しています。
このサーバの日時設定を取得してCookieの値と比較して判別する処理のサンプルは以下になります。
サーバの日時設定を判別してCookie処理を判別するサンプル
以上がjQuery Cookieで日時や時間を操作して保存期間を設定するいろいろなやり方でした。
Cookieの保存期間を操作する際にぜひ。。。