localStorageでデータの保存期限を設定する

localStorageでデータを保存した際、一部データの保存期限を設定したいということがあったので、対応方法をメモ。

サンプルコード

広告バナーをユーザーが閉じた後、一定期間は表示されないようにするという例で実装してみます。

<div id="ad-bnr">
	<p>広告バナーサンプルです。</p>
	<button id="ad-bnr_close">閉じる</button>
</div>

.is-showの追加・削除で表示・非表示を切り替えられるようにします。

#ad-bnr {
	display: none;
	width: 300px;
	padding: 30px;
	background: gray;
}
#ad-bnr.is-show {
	display: block;
}

最後にJavaScriptです。

var period = 1000 * 60 * 1; // 保存期間:1分(1000ミリ秒 * 60秒 * 1分)
// localStorageで使用するkey名
var storage_key = 'ad_close'; // 広告バナー管理で使用する値
var storage_period_key = 'ad_close_time'; // 保存期間で使用する値

var ad = document.getElementById('ad-bnr');

// 保存期間の値が保存されている場合
if(localStorage.getItem(storage_period_key) !== null) {
  // 保存されている値と現在の値の差を見て、期間を過ぎていないか確認
  var df = Date.now() - parseFloat(localStorage.getItem(storage_period_key));
  if(df > period) {
    // 期間を過ぎている場合はlocalStorageの値を削除
    localStorage.removeItem(storage_key);
    localStorage.removeItem(storage_period_key);
  }
}

// 広告バナー管理の値が保存されていない場合はバナー表示
if(localStorage.getItem(storage_key) === null) {
  ad.classList.add('is-show');
}
document.getElementById('ad-bnr_close').addEventListener('click', ad_close, false);

// 広告バナーを閉じる際の処理
function ad_close() {
  ad.classList.remove('is-show');
  // localStorageに必要な値を保存
  localStorage.setItem(storage_key, 'on');
  localStorage.setItem(storage_period_key, Date.now());
}

コメントに入れている通りですが、localStorageで広告バナーの表示を管理する値(ad_close)と別に、期間を管理する値(ad_close_time)を使用しています。
広告バナーを表示するかの確認の前にad_close_timeの値と現在の差を確認して、期間が過ぎている場合は広告バナーが表示されるようにしています。
localStorageの保存期間設定のデモページ
保存期間はテストしやすいように1分にしていますが、1行目のperiod部分で適宜変更してください。