頁面重新加載后加載垂直側邊欄的存盤寬度位置

有人可以幫助我在調整側邊欄大小并重新加載頁面后如何設定和使用左側邊欄寬度的本地存盤資料？

我已經創建了一個本地存盤資料并使用下面的代碼檢索它，但是在重新加載頁面后，調整大小的側邊欄將恢復到其默認寬度。它應該有一個“onload”事件屬性？或任何建議請..

這是我獲取代碼的鏈接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);
});

uj5u.com熱心網友回復：

如果您想在頁面加載時加載存盤的位置，您可能需要使用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 。

uj5u.com熱心網友回復：

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

    leftSide.style.width = localStorage.getItem('newLeftWidth');

    // 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}%`;
        localStorage.setItem('newLeftWidth', leftSide.style.width);

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

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

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

標籤：javascript 侧边栏

上一篇：更改影像默認白色背景

下一篇：ReactLeaflet：丑陋警告：串列中的每個孩子都應該有一個唯一的“關鍵”道具