Load stored width position of vertical sidebar after page reload

How to set and use the local storage data of the left sidebar width after resizing the sidebar and reloading the page?

I have created a local storage data and retrieve it using the codes below but after reloading the page the resized sidebar is going back to its default width. It should have an “onload” event attribute?

Here is the link where I get the codes https://htmldom.dev/create-resizable-split-views/

Credit to: htmldom.dev for sharing this code

document.addEventListener('DOMContentLoaded', function () {
    // Query the element
    const resize = document.getElementById('dragMe');
    const leftSide = resize.previousElementSibling;
    const rightSide = resize.nextElementSibling;

    // The current position of mouse
    let x = 0;
    let y = 0;
    let leftWidth = 0;

    // Handle the mousedown event
    // that's triggered when user drags the resize
    const mouseDownHandler = function (e) {
        // Get the current mouse position
        x = e.clientX;
        y = e.clientY;
        leftWidth = leftSide.getBoundingClientRect().width;

        // Attach the listeners to `document`
        document.addEventListener('mousemove', mouseMoveHandler);
        document.addEventListener('mouseup', mouseUpHandler);
    };

    const mouseMoveHandler = function (e) {
        // How far the mouse has been moved
        const dx = e.clientX - x;
        const dy = e.clientY - y;

        // Set a new left width and saving to local storage
        const newLeftWidth = ((leftWidth + dx) * 100) / resize.parentNode.getBoundingClientRect().width;
        leftSide.style.width = `${newLeftWidth}%`;

        resize.style.cursor = 'col-resize';
        document.body.style.cursor = 'col-resize';

        leftSide.style.userSelect = 'none';
        leftSide.style.pointerEvents = 'none';

        localStorage.setItem('newLeftWidth', leftSide.style.width);
        const localNewLeftWidth = localStorage.getItem('newLeftWidth');
        leftSide.style.width = localNewLeftWidth;
        console.log('log:' + localNewLeftWidth);

        rightSide.style.userSelect = 'none';
        rightSide.style.pointerEvents = 'none';
    };

    const mouseUpHandler = function () {
        resize.style.removeProperty('cursor');
        document.body.style.removeProperty('cursor');

        leftSide.style.removeProperty('user-select');
        leftSide.style.removeProperty('pointer-events');

        rightSide.style.removeProperty('user-select');
        rightSide.style.removeProperty('pointer-events');

        // Remove the handlers of `mousemove` and `mouseup`
        document.removeEventListener('mousemove', mouseMoveHandler);
        document.removeEventListener('mouseup', mouseUpHandler);
    };

    // Attach the handler
    resize.addEventListener('mousedown', mouseDownHandler);
});

Answer

If you want to load the stored position when the page is loaded, you might want to use the DOMContentLoaded event:

document.addEventListener("DOMContentLoaded", () => {
  const localNewLeftWidth = localStorage.getItem('newLeftWidth');
  leftSide.style.width = `${localNewLeftWidth}%`;
  console.log('log: ' +`${localNewLeftWidth}%`);

  // Possibly load other stuff here 
});

Note that you have to add this event listener outside of your mouseMoveHandler.

You can learn more about the DOMContentLoaded event here: https://developer.mozilla.org/de/docs/Web/API/Window/DOMContentLoaded_event.

Advertisement

Answer