使用 localStorage 保存仪表盘布局需定义以组件 ID 为 key 的对象结构，含 x、y、width、height、zIndex 等字段；拖拽/缩放结束时防抖写入 JSON 字符串，并 try-catch 异常；页面加载后解析并应用样式，支持多看板可拼接唯一 key 或用嵌套对象管理。
使用 localStorage 保存自定义仪表盘组件的布局坐标，核心是将每个组件的位置、大小等信息序列化为 JSON 字符串后存入浏览器本地存储，并在页面加载时读取还原。关键在于结构设计合理、数据同步及时、异常处理到位。
定义可存储的布局数据结构
每个组件建议用唯一 ID 标识，布局信息包含常用字段如 x、y、width、height、zIndex 等（根据实际拖拽/缩放能力调整）：
{
"widget-1": { "x": 10, "y": 20, "width": 300, "height": 200, "zIndex": 2 },
"widget-2": { "x": 320, "y": 20, "width": 250, "height": 180, "zIndex": 1 }
}
推荐统一用对象映射（key 为组件 ID），便于增删改查；避免用数组索引依赖顺序，否则拖拽重排后易出错。
保存布局：监听拖拽/调整事件并写入 localStorage
在组件拖拽结束（如 dragend）、尺寸调整完成（如 resizeend 或鼠标松开）时触发保存。注意防抖，避免高频写入：
立即学习“前端免费学习笔记（深入）”；
- 使用
lodash.debounce或简易 setTimeout 防抖（如延迟 300ms 再保存） - 调用
localStorage.setItem('dashboard-layout', JSON.stringify(layoutObj)) - 包裹
try...catch捕获QuotaExceededError等异常，必要时清理旧数据或提示用户
恢复布局：页面加载时读取并应用
在 DOM 加载完成后（如 DOMContentLoaded 或 Vue/React 的 mounted/useEffect）执行：
- 用
localStorage.getItem('dashboard-layout')获取字符串 - 用
JSON.parse()解析；若解析失败或值为空，回退到默认布局 - 遍历解析后的对象，通过
element.style.left、style.top等或 CSS-in-JS 方式设置每个组件样式 - 确保组件 DOM 已挂载再操作，避免找不到元素
进阶建议：支持多用户或多看板场景
单个 key（如 dashboard-layout）只够存一个布局。如需区分用户或看板：
- 拼接唯一标识：例如
layout-${userId}-${dashboardId} - 或统一存为大对象：
{ "user1:home": { ... }, "user2:report": { ... } }，按需取子集 - 敏感布局（如含权限字段）不存敏感信息，仅存 UI 相关字段
