用localStorage保存首页模块的order、hidden和sidebar状态，DOM加载后按序重排节点、设置显隐、应用全局类。需确保模块ID唯一稳定，写入前校验长度，还原前过滤无效ID。
直接用 localStorage 记录用户拖拽、折叠、排序后的首页模块位置，刷新后自动还原——关键不是存数据，而是把 DOM 状态和存储逻辑对齐。
一、定义可拖拽模块的唯一标识与结构
每个首页模块（如“新闻卡片”“天气组件”“快捷入口”）必须有稳定且唯一的 id 或 data-module 属性，不能依赖动态生成的索引或类名。例如：
这样后续读写时才能准确映射状态，避免因 DOM 顺序变化导致错位。
二、保存用户行为：位置、显隐、尺寸三类状态统一序列化
用户操作通常包括：拖动排序、点击折叠/展开、手动调整宽度（如侧边栏收起）。建议用一个对象集中管理，每次变更后整体存入 localStorage：
- 用数组记录模块 ID 的当前顺序（如
["weather", "news", "shortcut"]） - 用布尔对象记录折叠状态（如
{"news": false, "weather": true}） - 用字符串或数字记录关键尺寸（如
{"sidebar": "collapsed"}）
保存示例（使用防抖避免高频写入）：
function saveLayout() {
const layout = {
order: Array.from(document.querySelectorAll('.widget')).map(el => el.dataset.module),
hidden: Object.fromEntries(
Array.from(document.querySelectorAll('.widget')).map(el => [el.dataset.module, el.classList.contains('hidden')])
),
sidebar: document.body.classList.contains('sidebar-collapsed') ? 'collapsed' : 'expanded'
};
localStorage.setItem('homepage-layout', JSON.stringify(layout));
}
三、页面加载时还原布局：分步执行，不阻塞渲染
在 DOM 加载完成（DOMContentLoaded）后立即读取并应用，但注意顺序：
- 先按存储的
order数组重排 DOM 节点（用insertBefore或append） - 再遍历设置
hidden状态（添加/移除hidden类或内联display） - 最后处理全局状态（如 body 类控制侧边栏）
还原示例：
function restoreLayout() {
const saved = localStorage.getItem('homepage-layout');
if (!saved) return;
try {
const layout = JSON.parse(saved);
// 重排
layout.order.forEach(id => {
const el = document.querySelector(`[data-module="${id}"]`);
if (el) document.getElementById('main-grid').appendChild(el);
});
// 折叠
Object.entries(layout.hidden).forEach(([id, isHidden]) => {
const el = document.querySelector(`[data-module="${id}"]`);
if (el) el.classList.toggle('hidden', isHidden);
});
// 侧边栏
if (layout.sidebar === 'collapsed') document.body.classList.add('sidebar-collapsed');
} catch (e) { console.warn('Layout restore failed:', e); }
}
四、兼容性与边界处理要点
localStorage 容量约 5–10MB，但单次写入过大或频繁操作仍可能失败：
- 写入前做
JSON.stringify长度检查（如超过 80KB 就丢弃非关键字段） - 监听
storage事件，跨标签页同步（可选） - 用户清除缓存后自动降级：用默认顺序 + 显式提示“已恢复初始布局”
- 敏感操作（如删除模块）建议加确认，并同步清理对应存储字段
不复杂但容易忽略：所有模块 ID 必须真实存在于当前页面，还原前先过滤掉已移除的模块 ID，避免空引用报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
