Разбор JSON-структур

Условие

Создайте механизм, позволяющий менять размеры компонентов пользовательского интерфейса в реальном времени, при этом сохранять их текущие параметры в LocalStorage, чтобы при повторном открытии страницы размеры восстанавливались автоматически.

Ответ

Размер можно менять через CSS resize и отслеживать ResizeObserver. В LocalStorage сохраняют числа, а при восстановлении валидируют их и ограничивают допустимым диапазоном.

Пример для существующего panel:

const panel = document.querySelector('#panel');
panel.style.cssText += ';resize:both;overflow:auto;box-sizing:border-box';
try {
    const saved = JSON.parse(localStorage.getItem('panel-size'));
    if (saved && Number.isFinite(saved.width) && Number.isFinite(saved.height)) {
        panel.style.width = `${Math.max(150, Math.min(1200, saved.width))}px`;
        panel.style.height = `${Math.max(100, Math.min(900, saved.height))}px`;
    }
} catch {}
let timer;
const observer = new ResizeObserver(() => {
    clearTimeout(timer);
    timer = setTimeout(() => {
        const { width, height } = panel.getBoundingClientRect();
        try { localStorage.setItem('panel-size', JSON.stringify({ width, height })); } catch {}
    }, 200);
});
observer.observe(panel);

При уничтожении компонента отключают observer и таймер. Ошибка хранилища не должна ломать интерфейс; размеры дополнительно ограничивают экраном.