应选用 localstorage 存储撤销步数限制，因其具备持久性、容量充足、同源可用和无网络开销等优势，配合 json 序列化操作及异常捕获、数值校验等措施可确保配置可靠。
撤销步数限制属于用户个性化配置，适合用 localStorage 持久保存。它不随页面刷新丢失，且无需后端参与，正好匹配设计工具中“用户自定义操作回溯深度”的需求。
为什么选 localStorage 而不是 sessionStorage 或 cookie
localStorage 的特性完全契合该场景：
- 持久性：关闭浏览器或重启电脑后设置依然有效，用户不用每次重设
-
容量充足：5–10 MB 容量远超单个数字或小对象的存储需求（如
{"undoSteps": 50}仅占几十字节） - 同源可用：同一域名下所有页面（如编辑页、设置页、首页）都能读写该配置
- 无网络开销：不随 HTTP 请求发送，不影响性能，也避免暴露配置到服务端
保存和读取撤销步数的具体写法
推荐使用键名 "designTool.undoSteps" 保证命名清晰、避免冲突。注意 localStorage 只接受字符串值，需配合 JSON.stringify 和 JSON.parse 处理数值或对象：
- 保存设置（例如用户在设置页选了 60 步）：
localStorage.setItem("designTool.undoSteps", JSON.stringify(60)); - 读取设置（初始化工具时获取）：
const undoSteps = JSON.parse(localStorage.getItem("designTool.undoSteps") || "30");
（默认回退到 30，防止首次访问时读取为null） - 删除设置（恢复默认）：
localStorage.removeItem("designTool.undoSteps");
结合实际使用场景的注意事项
避免常见误用，让配置真正可靠：
-
异常捕获必须加：某些隐私模式或禁用 localStorage 的浏览器会抛错，建议包裹
try...catch -
数值校验不可少：读取后检查是否为合法正整数，防止被恶意篡改或残留脏数据（如
"abc"或负数） - 不存敏感逻辑：只存步数上限值，不要存历史快照本身——那应由 JavaScript 内存栈管理，localStorage 仅作“配置锚点”
- 与功能逻辑解耦：保存设置的操作独立于撤销执行逻辑；工具初始化时读取一次即可，后续由内存栈动态维护历史记录
扩展：支持多设备同步的轻量补充方案
如果产品后续需要跨设备同步该设置（如用户在 iPad 设置了 80 步，希望桌面端也生效），localStorage 无法胜任。此时可将该配置作为用户偏好项，通过登录态 + 简单 API 同步到服务端。但对多数网页设计工具而言，本地持久化已足够实用——毕竟用户更关心“我这台电脑顺手”，而非强一致性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
