LocalStorage可持久化存储任务优先级与颜色映射关系实现自动还原：1.为任务生成唯一ID并以数字存优先级；2.用对象映射数字到颜色并统一存入；3.页面加载时解析并应用颜色；4.优先级变更时实时更新存储并防错处理。
LocalStorage 可以轻松记住每个任务的优先级对应的颜色，下次打开页面时自动还原，无需后端或复杂逻辑。
1. 为每个任务分配唯一ID并绑定优先级
添加任务时生成唯一标识（如时间戳+随机数），同时记录它的优先级值（比如 1=低、2=中、3=高）：
- 用 data-id 属性标记 DOM 元素，方便后续查找和更新
- 优先级建议用数字而非颜色名存储，更易维护和扩展（比如未来支持更多等级）
- 示例：创建任务时保存
{ "task_1712345678901": 3 }到 localStorage
2. 将优先级映射为颜色并存入 localStorage
定义一个颜色映射表，把数字优先级转成 CSS 颜色值，再统一存进 localStorage：
- 映射关系可写成对象：
const priorityColor = { 1: '#90CAF9', 2: '#FFD54F', 3: '#E57373' }; - 保存时用
localStorage.setItem('taskColors', JSON.stringify(colorMap)) - 注意：只存颜色映射，不重复存整个任务列表，避免数据冗余
3. 页面加载时读取并应用颜色
在 DOMContentLoaded 或初始化函数中执行还原逻辑：
立即学习“前端免费学习笔记（深入）”；
- 用
JSON.parse(localStorage.getItem('taskColors') || '{}')安全读取 - 遍历所有带 data-id 的任务元素，查表设置
style.backgroundColor或添加 class - 若某任务 ID 在存储中不存在，按默认优先级（如 2）处理，保证界面不崩
4. 优先级变更时实时更新 localStorage
点击切换优先级（如按钮或下拉菜单）后立即同步存储：
- 获取当前任务的 data-id 和新优先级值
- 更新内存中的颜色映射对象，再重新写入 localStorage
- 推荐节流操作（如防连点），避免高频写入影响性能
不复杂但容易忽略：记得监听 window.beforeunload 或使用 try-catch 包裹 localStorage 操作，防止私密模式下报错中断流程。
