直接用localStorage存运动速率数值（如"1.2"），页面加载初期即读取并注入动画逻辑，用户调整时实时写入；关键在存纯数字字符串、早读取、早应用、精度控制、兜底降级与多标签同步。
直接用 localStorage 存运动速率数值（如 "1.2" 或 "0.8"），页面加载时立即读取并注入动画逻辑，用户调整滑块或按钮时实时写入——关键在数值精度控制、单位统一和降级兜底，不复杂但容易忽略细节。
存什么：只存纯数字字符串，不带单位
运动速率本质是缩放因子或时间倍率（如 Canvas 粒子速度、SVG 动画 duration 缩放、video 播放速率等），应存为规范化的字符串数字：
- 推荐保留一位小数，如 "1.0"、"0.5"、"2.0"；避免存 "1" 或 "1.00"，防止解析歧义
- 键名用语义化固定值，例如 "wallpaperSpeed"，不加前缀或版本号
- 不存对象、不存单位（如不存 {"value": 1.2, "unit": "x"}），轻量且兼容所有浏览器
怎么读：页面加载初期就应用，避免动画跳变
速率影响的是动画起始状态（如粒子初速度、CSS 动画 timing-function 缩放），必须在动画初始化前完成读取：
- 在 内嵌一段内联脚本，比 DOMContentLoaded 更早执行
- 读取后转为浮点数，并设合理默认值：
const speed = parseFloat(localStorage.getItem("wallpaperSpeed")) || 1.0; - 若解析失败（如存了非数字字符串）或超出安全范围（如 5.0），自动回退到 1.0
怎么写：用户操作后立刻保存，同步更新运行时参数
监听用户对速率控制器的交互，写入同时驱动当前动画变化：
- 对 监听
input事件（非 change），实现拖拽实时响应 - 对按钮组（如“慢/标准/快”）监听 click，写入对应预设值：
localStorage.setItem("wallpaperSpeed", "0.7") - 写入后立即调用动画更新函数，例如：
updateParticleSpeed(speed);或document.documentElement.style.setProperty("--wp-speed", speed);
容错与兼容：覆盖常见异常场景
动态壁纸常运行在低性能设备或隐私模式下，需主动防御：
- 捕获 SecurityError（如 iOS 隐私模式）：用 try/catch 包裹 setItem，失败时仅降级为内存变量，不中断动画
- 监听 storage 事件，支持多标签页同步：其他窗口修改速率后，本页自动响应更新
- 提供“恢复默认”入口，执行
localStorage.removeItem("wallpaperSpeed")，并重置 UI 控件与运行时值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
