Загрузить сохраненную ширину вертикальной боковой панели после перезагрузки страницы

Как установить и использовать локальное хранилище данных ширины левой боковой панели после изменения размера боковой панели и перезагрузки страницы?

Я создал данные локального хранилища и извлек их, используя приведенные ниже коды, но после перезагрузки страницы боковая панель с измененным размером возвращается к своей ширине по умолчанию. Он должен иметь атрибут события «загрузка»?

Вот ссылка, где я получаю коды https://htmldom.dev/create-resizable-split-views/

Кредит: htmldom.dev для обмена этим кодом

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