可直接用 localStorage.setItem() 存质量参数为字符串，读取时用 Number() 或 parseInt() 转回数值；监听滑块变化存值，页面加载时读取并设控件值，压缩时取值转数字使用，Canvas 需除以 100 转为 0–1 范围；多参数建议用 JSON 序列化统一管理。
可以直接用 localStorage.setItem() 将质量参数（如数字 80）存为字符串，读取时用 parseInt() 或 Number() 转回数值，确保后续压缩逻辑能正确使用。
保存质量参数到 localStorage
用户调整滑块或输入框后，把当前值存入 localStorage：
- 假设质量值存在
<input type="range" id="quality" min="1" max="100" value="80"> - 监听变化事件：
quality.addEventListener('input', () => { localStorage.setItem('imgCompressQuality', quality.value); }); - 值会以字符串形式保存，比如
"85"，这是正常行为
页面加载时读取并应用默认值
在页面初始化阶段（例如 DOM 加载完成后），从 localStorage 取出值并设为控件当前值：
const saved = localStorage.getItem('imgCompressQuality');- 安全转换：如果存在且是有效数字，就赋值，否则用默认值（如 80）
quality.value = saved && !isNaN(saved) ? saved : '80'; - 记得同步更新界面上的显示（如旁边的数字标签）
配合压缩逻辑使用该参数
实际调用图像压缩函数时，不要硬编码质量值，而是读取并转为数字：
立即学习“前端免费学习笔记（深入）”；
const quality = Number(localStorage.getItem('imgCompressQuality')) || 80;- 传给压缩库（如
compressorjs、browser-image-compression或 CanvastoBlob的quality选项） - 注意：Canvas 的
toBlob和toDataURL接受 0–1 范围的浮点数，需做转换：quality / 100
可选：支持多参数持久化
如果工具还支持格式（JPEG/PNG）、尺寸限制等，建议统一管理：
- 用一个对象存储所有设置：
{ quality: 85, format: 'jpeg', maxWidth: 1920 } - 序列化后保存：
localStorage.setItem('imgCompressSettings', JSON.stringify(settings)); - 读取时解析：
JSON.parse(localStorage.getItem('imgCompressSettings') || '{}'); - 这样扩展性强，也避免 key 冲突
