页面重新加载后加载垂直侧边栏的存储宽度位置

Question

调整侧边栏大小并重新加载页面后，如何设置和使用左侧边栏宽度的本地存储数据？

我已经创建了一个本地存储数据并使用下面的代码检索它，但是在重新加载页面后，调整大小的侧边栏又回到了它的默认宽度。它应该有一个“onload”事件属性？

这里是 link 我得到代码的地方 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);
});

Answer 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。

页面重新加载后加载垂直侧边栏的存储宽度位置

Load stored width position of vertical sidebar after page reload

javascript

sidebar