如何用JavaScript检测用户点击清除站点数据按钮清空浏览器数据

首先明确前提：浏览器没有暴露专门监听「用户点击Clear Site Data按钮」的原生API——清除站点数据是浏览器隐私设置层面的系统操作，不在网页JavaScript的权限访问范围内，只能通过数据被清除后的特征做间接判定。

可落地的检测方案 #

多存储交叉校验法 #

核心逻辑：页面正常运行时，在所有会被Clear Site Data清空的存储载体中写入校验标记；每次页面初始化时检查所有标记是否存在，如果多个存储的标记同时无理由丢失，即可判定发生过站点数据清除操作。
参考实现代码：

// 校验标记统一标识
const DETECT_FLAG = '__site_clear_check_flag__';

// 写入全量存储校验标记
function setDetectFlag() {
  // 写入LocalStorage
  localStorage.setItem(DETECT_FLAG, Date.now());
  // 写入SessionStorage
  sessionStorage.setItem(DETECT_FLAG, Date.now());
  // 写入持久化同域Cookie
  document.cookie = `${DETECT_FLAG}=${Date.now()}; path=/; max-age=31536000; SameSite=Lax`;
  // 写入IndexedDB
  const dbOpenReq = indexedDB.open('detect_db', 1);
  dbOpenReq.onupgradeneeded = (e) => {
    const db = e.target.result;
    if (!db.objectStoreNames.contains('flag_store')) db.createObjectStore('flag_store');
  };
  dbOpenReq.onsuccess = (e) => {
    const db = e.target.result;
    const tx = db.transaction('flag_store', 'readwrite');
    tx.objectStore('flag_store').put(Date.now(), DETECT_FLAG);
  };
}

// 初始化时执行清除检测
async function checkDataCleared() {
  let missCount = 0;
  // 校验LocalStorage标记
  if (!localStorage.getItem(DETECT_FLAG)) missCount++;
  // 校验SessionStorage标记
  if (!sessionStorage.getItem(DETECT_FLAG)) missCount++;
  // 校验Cookie标记
  const hasCookieFlag = document.cookie.split('; ').some(item => item.startsWith(`${DETECT_FLAG}=`));
  if (!hasCookieFlag) missCount++;
  // 校验IndexedDB标记
  const hasIdbFlag = await new Promise(resolve => {
    const dbOpenReq = indexedDB.open('detect_db', 1);
    dbOpenReq.onsuccess = (e) => {
      const db = e.target.result;
      // 库不存在直接判定标记丢失
      if (!db.objectStoreNames.contains('flag_store')) return resolve(false);
      const tx = db.transaction('flag_store', 'readonly');
      const getReq = tx.objectStore('flag_store').get(DETECT_FLAG);
      getReq.onsuccess = () => resolve(!!getReq.result);
      getReq.onerror = () => resolve(false);
    };
    dbOpenReq.onerror = () => resolve(false);
  });
  if (!hasIdbFlag) missCount++;

  // 3种及以上存储标记同时丢失，判定为触发过站点数据清除
  if (missCount >= 3) {
    // 此处写入数据清空后的业务逻辑：比如状态重置、行为上报等
    console.log('检测到站点数据已被清空');
    setDetectFlag();
    return true;
  }
  // 刷新标记有效期
  setDetectFlag();
  return false;
}

// 页面加载完成后触发检测
window.addEventListener('load', checkDataCleared);

注意：该方案仅能检测两次页面访问间隔中发生的数据清除动作，无法做到点击按钮的实时响应——用户点击Clear Site Data后，当前页面的JS执行上下文会被立即销毁，不存在运行回调的时机。

Service Worker 辅助校验 #

可以额外注册同域Service Worker作为补充校验维度：Service Worker的注册状态、Cache Storage存储内容同样会被Clear Site Data清空，如果页面加载时发现原本应该存在的SW注册状态、缓存资源全部丢失，可以进一步提升检测准确率，降低单存储被用户手动删除导致的误判。

方案边界说明 #

• 无法区分用户手动点击Clear Site Data、浏览器设置关闭自动清数据、隐私模式退出自动清数据这几种场景，三者的数据表现特征完全一致。
• 如果用户清除数据后不再访问站点，无法捕获到该次清除行为。
• 仅清除单类数据（比如只清Cookie不删其他存储）的场景，可以根据业务需求调整判定阈值，避免误判。

内容的提问来源于stack exchange，提问作者Noah Alamo