CODEWITHSUNDEEP
javascriptlocal-storage
opensource-developer
opensource-developer

Reputation: 3058

Performance issues with using localStorage / sessionStorage?

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.

Upvotes: 2

Views: 1235

Answers (1)

Ahashan Alam Sojib
Ahashan Alam Sojib

Reputation: 336

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.

Upvotes: 1

Related Questions