HTML原生<input type="range">刷新后丢失值，因其value属性仅在初始渲染时生效，无自动持久化能力；必须通过JavaScript监听input事件将值存入localStorage，并在页面加载时读取并赋值给value属性。
HTML 原生 <input type="range"> 本身不保存状态，所谓“记忆”必须靠 JS 主动维护；不写 JS，纯 HTML 无法实现真正的状态记忆。
为什么 <input type="range"> 刷新后会丢失值
浏览器对 range 输入框的初始值仅读取 value 属性（或 defaultValue），但该属性在页面加载后不会自动同步到 DOM 状态；若未显式设置 value，它默认为 "50"（即使用户之前拖过），且刷新即重置。
- 现象：
range拖到 75 → 刷新页面 → 又回到 50 - 原因：HTML 是声明式静态结构，无运行时状态持久化能力
- 关键点：
value属性只在初始渲染时生效，后续修改需 JS 显式赋值
用 localStorage 实现简单状态记忆（最常用）
在用户拖动结束（input 或 change 事件）时存入 localStorage，页面加载时从 localStorage 读取并设回 value。
- 推荐监听
input事件：实时响应拖动，避免松手才存（体验更连贯） - 必须加空值判断：若
localStorage.getItem("slider-value")返回null，不能直接赋给value，否则可能触发异常或回退到默认值 - 示例逻辑：
const slider = document.querySelector('input[type="range"]');
const key = 'slider-value';
// 加载时恢复
const saved = localStorage.getItem(key);
if (saved !== null) {
slider.value = saved;
}
// 拖动时保存
slider.addEventListener('input', () => {
localStorage.setItem(key, slider.value);
});
注意 valueAsNumber 和字符串值的差异
slider.value 总是字符串，而 slider.valueAsNumber 是数字类型；存进 localStorage 时两者都可，但读取后赋值必须用字符串（因为 value 属性只接受字符串）。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
slider.value = localStorage.getItem(key);—— 如果存的是数字，没问题；但如果存的是字符串（如"75"），也没问题；但若你误用了slider.valueAsNumber = ...，赋值会失败（只读属性） - 安全写法：统一用
slider.value = String(storedValue)或确保存的是字符串 - 兼容性：所有现代浏览器都支持
valueAsNumber，但没必要依赖它做存储逻辑
服务端记忆？那已超出 HTML 范畴
如果需要跨设备、多用户、带权限的状态记忆，localStorage 不适用；此时必须走 AJAX + 后端 API，HTML 组件只负责触发和渲染，状态由服务器返回并初始化。
- 典型流程：页面加载时发请求
GET /api/user-preferences→ 解析 JSON → 找到对应滑块字段 → 设slider.value - 注意防错：API 失败、字段缺失、值越界（如返回
120而max="100"）都要处理，否则滑块可能卡死或显示异常 - 此时 HTML 本身仍无状态能力，只是 JS 的数据载体
真正容易被忽略的点：很多人以为给 <input> 加个 id 或 name 就能“记住”，其实这些属性只用于表单提交或 CSS 选择，跟运行时状态毫无关系。状态记忆永远发生在 JS 层，HTML 只提供宿主和接口。
