localStorage 用于持久化存储用户界面缩放比例：页面加载时读取并应用，用户调整后立即保存；推荐键名 "ui_zoom_scale"，存字符串或 JSON；配合 transform 缩放需设 transform-origin 和反向调整宽度，并监听 storage 事件实现多标签页同步。
用 WebStorage（主要是 localStorage）记住用户手动调整的界面缩放比例，核心就两件事：页面加载时读取并应用，用户操作后及时存入。它不改变缩放机制本身，只负责“记下来、下次还给你”。
保存缩放比例到 localStorage
当用户通过按钮、滑块或快捷键调整缩放（比如点击“放大”后 scale 变为 1.2），在对应事件处理中执行：
- 把当前缩放值转成字符串存入，推荐使用语义化键名，如 "ui_zoom_scale"
- 确保值格式统一，例如
localStorage.setItem("ui_zoom_scale", "1.2")或localStorage.setItem("ui_zoom_scale", JSON.stringify(1.2)) - 避免直接存对象或函数；若需扩展（如同时存缩放+字体大小），可用 JSON 字符串，如
{"scale":1.2,"fontSize":"16px"}
页面加载时读取并应用缩放
在页面初始化阶段（如 DOMContentLoaded 或组件挂载时）执行：
- 用
localStorage.getItem("ui_zoom_scale")获取值 - 安全解析：先检查是否存在，再转为数字，无效时设默认值（如 1.0）
const saved = localStorage.getItem("ui_zoom_scale");
const scale = saved ? parseFloat(saved) : 1.0; - 将该值应用到实际缩放逻辑中——如果是用
transform: scale()，就设置 body 或容器的样式；如果是 rem 方案，就据此调整根元素 font-size
配合 transform 缩放时的注意事项
若采用 transform: scale() 实现整体缩放，仅靠 localStorage 记住数值还不够，还需注意：
立即学习“前端免费学习笔记（深入）”；
- 必须同步设置
transform-origin: 0 0，否则缩放中心偏移会导致布局错位 - 为避免 body 缩放后出现横向滚动条，建议按比例反向调整 body 宽度：
body { width: calc(100vw / ${scale}); } - fixed 定位元素（如悬浮按钮、顶部导航）会因 transform 失去视口锚点，需额外包裹或改用 JS 动态重定位
支持多标签页同步（可选增强）
用户在一个标签页调了缩放，其他同源标签页也应响应变化：
- 监听
window.addEventListener('storage', e => {...})事件 - 检查
e.key === "ui_zoom_scale"，再读取新值并更新当前页 UI - 注意：该事件不会在触发修改的标签页自身触发，只通知其他打开的同源页面
