[英]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?它应该有一个“onload”事件属性?
Here is the link where I get the codes https://htmldom.dev/create-resizable-split-views/这是我获得代码https://htmldom.dev/create-resizable-split-views/的链接
Credit to: htmldom.dev for sharing this code感谢: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);
});
If you want to load the stored position when the page is loaded, you might want to use the DOMContentLoaded
event:如果您想在页面加载时加载存储的 position,您可能需要使用DOMContentLoaded
事件:
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
.请注意,您必须在mouseMoveHandler
之外添加此事件侦听器。
You can learn more about the DOMContentLoaded
event here: https://developer.mozilla.org/de/docs/Web/API/Window/DOMContentLoaded_event .您可以在此处了解有关DOMContentLoaded
事件的更多信息: https://developer.mozilla.org/de/docs/Web/API/Window/DOMContentLoaded_event 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.