【JavaScript】ブラウザーキャッシュでWEBページへ再訪問時の実行を制御する

JavaScript(ジャバスクリプト)

2023.06.06

この記事は約4分で読めます。

再訪問時の実行を制御する
createCacheとupdateCache
ブラウザキャッシュの値を確認する
まとめ

再訪問時の実行を制御する

このコードは、ブラウザーキャッシュを使用して、例えば２回目の訪問ユーザーにポップアップ広告を制御するといった場合のひとつの方法です。

ポップアップが表示された時間を保存するために、ブラウザーキャッシュ内に “popup_cache” というキーでJSON形式のデータを保存します。

// キャッシュから情報を取得
var popupCache = window.caches.match('popup_cache');

// キャッシュが存在する場合
if (popupCache) {
  // キャッシュから取得した情報をJSON形式に変換
  popupCache.then(function(response) {
    response.json().then(function(cacheData) {
      // 最後にポップアップが表示された時間を取得
      var lastPopupTime = cacheData.last_popup_time;

      // 現在の時間を取得
      var currentTime = new Date().getTime();

      // 最後にポップアップが表示された時間から一定期間が経過している場合
      if ((currentTime - lastPopupTime) > 86400000) { // 24時間経過している場合
        // ポップアップを表示する
        showPopup();
        // キャッシュを更新する
        updateCache(currentTime);
      }
    });
  });
}
// キャッシュが存在しない場合
else {
  // ポップアップを表示する
  showPopup();
  // キャッシュを作成する
  createCache();
}

キャッシュストレージから “popup_cache” を取得します。取得したデータが存在する場合、最後にポップアップが表示された時間を取得し、現在の時間と比較して24時間以上経過しているかどうかを確認します。

createCacheとupdateCache

この例では、ブラウザーキャッシュを使用するため、LocalStorageやSessionStorageを使用する必要はありません。代わりに、ブラウザーキャッシュAPIを使用して、キャッシュを作成、更新、および読み取ります。


// キャッシュを作成する関数
function createCache() {
  var currentTime = new Date().getTime();
  var cacheData = {
    last_popup_time: currentTime
  };
  window.caches.open('popup_cache').then(function(cache) {
    cache.put('popup_cache', new Response(JSON.stringify(cacheData)));
  });
}

// キャッシュを更新する関数
function updateCache(currentTime) {
  window.caches.match('popup_cache').then(function(response) {
    response.json().then(function(cacheData) {
      cacheData.last_popup_time = currentTime;
      window.caches.open('popup_cache').then(function(cache) {
        cache.put('popup_cache', new Response(JSON.stringify(cacheData)));
      });
    });
  });
}

// ポップアップを表示する関数
function showPopup() {
  // ポップアップの表示処理
}

local storageの場合、明示的に削除しない限り、サイト上に永続的に残ってしまいます。