nonTrivialDOMCalculation vs sessionStorage vs localStorage

Edit on GitHub

Test recalculating a non-trivial DOM-manipulation vs accessing Session / Local Storage

Setup

sessionStorage.setItem('nonTrivialDOMvsStorage', 15);
localStorage.setItem('nonTrivialDOMvsStorage', 15);

Tests

  • nonTrivialDOMCalculation

    var dummyWrapper;
    var dummyContent;
    var fullWidth;
    var widthWithScrollbar;
    
    dummyWrapper = document.createElement('div');
    dummyWrapper.style.visibility = 'hidden';
    dummyWrapper.style.width = '100px';
    
    document.body.appendChild(dummyWrapper);
    
    fullWidth = dummyWrapper.offsetWidth;
    
    // force scrollbars
    dummyWrapper.style.overflow = 'scroll';
    
    // add innerdiv
    dummyContent = document.createElement('div');
    dummyContent.style.width = '100%';
    dummyWrapper.appendChild(dummyContent);
    
    widthWithScrollbar = dummyContent.offsetWidth;
    
    // Cleanup after ourselves
    dummyWrapper.parentNode.removeChild(dummyWrapper);
    let _SCROLLBAR_WIDTH = fullWidth - widthWithScrollbar;
  • sessionStorage

    let _SCROLLBAR_WIDTH = ~~sessionStorage.getItem('nonTrivialDOMvsStorage');
  • localStorage

    let _SCROLLBAR_WIDTH = ~~localStorage.getItem('nonTrivialDOMvsStorage');