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

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

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

Вот ссылка, где я получаю коды 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);
});

Пожалуйста, сведите ваши правки к минимуму — если вам нужно добавить детали или внести ясность, убедитесь, что вы отредактировали свое сообщение один раз (или больше, только если это необходимо). Ваш текущий трек редактирования выглядит так, как будто вы пытаетесь сохранить свой вопрос в верхней части домашней страницы «активным» (16 ваших правок на момент написания)

Can O' Spam 17.05.2022 11:26
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
1
51
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы хотите загрузить сохраненную позицию при загрузке страницы, вы можете использовать событие DOMContentLoaded:

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

  // Possibly load other stuff here 
});

Обратите внимание, что вы должны добавить этот прослушиватель событий за пределами вашего mouseMoveHandler.

Вы можете узнать больше о событии DOMContentLoaded здесь: https://developer.mozilla.org/de/docs/Web/API/Window/DOMContentLoaded_event.

Другие вопросы по теме