使用 localStorage / sessionStorage 的性能問題？

Question

我試圖檢測用戶在一段時間內不活動，並根據它需要執行某些操作。

我為此使用 localStorage，以便我在所有打開的選項卡中設置空閑時間開始。

下面是我的代碼的相關部分

  const detect = () => {
    //console.log(`time is ${idleStartTime}`);
    if(Date.now() - getIdleStartTime() > ONE_HOUR){
      console.log('idle time more than one hour....');
      console.log(`${getIdleStartTime()} ended`);
      alert('idle time more than one hour....');
    } else {
      idleAnimationFrameId = requestAnimationFrame(function() {
        detect();
      });
    }
  };

  const startTimer = () => {
    idleAnimationFrameId = requestAnimationFrame(function() {
      detect();
    });
  };

  function setIdleStartTime() {
    return new Promise((resolve, reject) => {
      if (storageAvailable('localStorage')) {
        // Yippee!
        localStorage.setItem('idleStartTime', Date.now());
        console.log('idle time has been set...');
        resolve(true);
      }
      else {
        // Too bad, no localStorage for us
        console.log('no local storage support...');
        reject('no local storage support.')
      }
    });
  }

如果通過列出以下事件，我將用戶標記為活動。 ['mousedown', 'mousemove', 'keydown', 'scroll', 'touchstart'];

  function setEventListners() {
    activityEvents.forEach(function(eventName) {
      document.addEventListener(eventName, activity, true);
    });
  }

  function activity() {
    console.log('user activity detected...');
    localStorage.setItem('idleStartTime', Date.now());
  }

我看到在某些情況下，有 1.5K 請求在很短的時間內發送到 localstorage 以設置該值。 我看到user activity detected...在幾秒鍾內在控制台上打印了大約 1.5k 次。

我的幾個問題是

1. 當我在 localStorage 中設置idleStartTime值時會出現任何性能問題，並且本地存儲集將在幾秒鍾內被調用數千次。

2. 有沒有比在我的場景中使用 localStorage 更好的警報器。

謝謝。

Answer 1

問題 1 的回答

不會有內存限制問題，因為每次調用localStorage.setItem ，都會覆蓋之前的值。 但是您提到您的活動更改在很短的時間內觸發了 1.5K 次。 這將增加磁盤使用（I/O）時間。

問題 2 的回答

1. 您可以使用 setTimeout 代替事件偵聽器。 許多網站使用 setTimeout 1 或 2 分鍾來檢測空閑時間。 邏輯是檢查您的所有輸入字段是否與 2 分鍾前相同。 如果它們相同，則認為該頁面在這段時間內處於空閑模式。 我知道這種方法看起來很古老，但它會顯着減少 I/O 時間。
2. 您可以跳過光標移動事件。 僅此一項就可以大量減少檢查。