使用 localStorage / sessionStorage 的性能问题？

Question

I am trying to detect user inactivity for a certain amount of time and based on it need to perform certain actions.

I am using localStorage for this so that i set the idle time start across all tabs open.

below is the relevant part of my code

  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.')
      }
    });
  }

I mark the user as active if by listing to the following events. ['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());
  }

I see that in some cases there are 1.5K request sent in a very short time to localstorage to set the value. I see user activity detected... printed on the console around 1.5k times in matter of seconds.

My couple of questions are

1. will there be any performance issues as i am setting the value idleStartTime in localStorage and local storage set will be called thousands of time in a few seconds.

2. Are there any better alertnatives than using localStorage for my scenario.

Thanks.

Answer 1

Answer to Question-1

There will be no memory limit issue since every time you call localStorage.setItem , you are overwriting on the previous value. But you mentioned that your activity change is firing 1.5K times in a very short amount of time. That will increase disk usage(I/O) time.

Answer to Question-2

1. You can use setTimeout instead of event listeners. Many website use setTimeout 1 or 2 minutes to detect idle time. The logic is to check whether all your input fields are same as 2 minutes ago. If they are same then it is considered that the page is in idle mode for that amount of time. I know this approach seems ancient, but it will significantly reduce I/O time.
2. You can skip cursor move event. That alone will reduce the checking in a huge amount.