localStorageでデータを保存した際、一部データの保存期限を設定したいということがあったので、対応方法をメモ。
サンプルコード
広告バナーをユーザーが閉じた後、一定期間は表示されないようにするという例で実装してみます。
1 2 3 4 | <div id="ad-bnr"> <p>広告バナーサンプルです。</p> <button id="ad-bnr_close">閉じる</button></div> |
.is-showの追加・削除で表示・非表示を切り替えられるようにします。
1 2 3 4 5 6 7 8 9 | #ad-bnr { display: none; width: 300px; padding: 30px; background: gray;}#ad-bnr.is-show { display: block;} |
最後にJavaScriptです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 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部分で適宜変更してください。
コメントが承認されるまで時間がかかります。