🧠 如何節省標籤查詢流量

本頁說明如何結合 get-info.js 與 localStorage 實現每日快取機制，避免重複查詢使用者標籤。

🔄 一、核心原則

• 每位使用者的標籤通常每天只更新一次。
• 應在首次取得資料後，將結果快取至 localStorage 或 cookie，並加上更新時間。
• 後續頁面可先比對時間，若超過 24 小時再重新發送請求。

💡 二、簡易實作範例

以下為建議實作方式，可整合進任一 HTML 頁面中：

<script>
(function () {
  const LAST_TAG_CHECK = 'tl_last_tag_update';
  const TAG_DATA_CACHE = 'tl_cached_tag_data';
  const lastUpdate = parseInt(localStorage.getItem(LAST_TAG_CHECK) || '0');
  const now = Date.now();
  const oneDay = 24 * 60 * 60 * 1000;

  // 若未查過或已超過一天，則載入 get-info.js 並快取結果
  if (!lastUpdate || now - lastUpdate > oneDay) {
    const script = document.createElement('script');
    script.src = 'https://cdn.taglite.com.tw/js/get-info.js';
    script.defer = true;
    document.head.appendChild(script);

    window.addEventListener('TagLiteInfos', function (e) {
      localStorage.setItem(TAG_DATA_CACHE, JSON.stringify(e.detail));
      localStorage.setItem(LAST_TAG_CHECK, now.toString());
    });
  } else {
    // 使用快取內容，模擬事件觸發
    const cached = localStorage.getItem(TAG_DATA_CACHE);
    if (cached) {
      try {
        const data = JSON.parse(cached);
        const evt = new CustomEvent('TagLiteInfos', { detail: data });
        window.dispatchEvent(evt);
      } catch (e) {
        console.warn('[TagLite] 快取資料格式錯誤，無法使用。');
      }
    }
  }
})();
</script>

🚀 三、建議應用情境

• 多頁網站：減少頁與頁之間不必要的標籤查詢。
• SPA 應用：建議以 Vue/React 全域變數暫存後續頁面使用。
• 跨站 iframe：若主站與子站共用標籤，可藉由 Cookie 快取資訊，避免多次查詢。

🔔 注意事項

• 請避免將快取時間設太久，否則會導致行為變化無法即時反應。
• 若使用 taglite_customize() 為使用者新增標籤，請斟酌是否清除快取。
• 標籤資料可能影響推薦結果，建議每日更新。