JavaScript管理页面状态需按用途选机制：cookie用于服务端校验的登录态；localStorage/sessionStorage处理前端持久化状态，如用户偏好；URL参数或hash管理路由相关状态；DOM属性或变量控制瞬时UI状态。
JavaScript 设置与读取页面状态，核心是根据用途选择合适机制：轻量、需服务端校验的用 document.cookie；前端持久化状态优先用 localStorage 或 sessionStorage；临时视图状态（如折叠展开、选中项）直接操作 DOM 属性或变量即可。
用 localStorage 管理持久化状态
适合保存用户偏好、主题切换、表单草稿等不敏感、无需后端参与的状态。
- 设置：用
localStorage.setItem(key, value)，value 必须是字符串，对象需先JSON.stringify() - 读取：用
localStorage.getItem(key)，返回字符串，对象需JSON.parse()还原 - 删除单项：用
localStorage.removeItem(key)；清空全部用localStorage.clear() - 注意：同源限制，且不触发跨窗口同步事件——如需响应变化，可监听
storage事件
用 document.cookie 处理服务端关联状态
适用于登录态 token、CSRF token 等需随 HTTP 请求自动携带、服务端验证的数据。
- 写入必须编码：
document.cookie = "token=" + encodeURIComponent("abc123") + "; path=/; secure; SameSite=Lax" - 读取需正则匹配并解码，避免误匹配（如
user_id不应匹配到user_id_token） - 无法单项删除，只能通过覆盖设过期时间伪造删除：
document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/" - HttpOnly 标记的 cookie JS 完全不可读，这是安全机制，不是错误
用 URL 参数或 hash 管理路由级状态
适合分页序号、筛选条件、标签页激活项等与当前地址强相关的状态。
立即学习“Java免费学习笔记（深入）”；
- 读取查询参数可用
new URLSearchParams(window.location.search)，简洁可靠 - 更新 URL 但不刷新页面：用
history.pushState()或history.replaceState() - 监听变化用
window.addEventListener('popstate', handler)，响应浏览器前进/后退 - hash 变更（
#tab=2）同样触发hashchange事件，适合单页应用简易导航
用 DOM 属性或变量管理瞬时 UI 状态
比如按钮禁用、菜单展开、输入框只读、加载中提示等，无需持久化，仅影响当前会话视觉与行为。
- 修改属性：
element.disabled = true、input.readOnly = false、div.hidden = true - 切换 class：
element.classList.toggle('active')比直接操作className更安全 - 状态变量建议统一维护在闭包或模块内，避免全局污染，例如：
let isMenuOpen = false - 配合事件监听实时响应用户操作，形成“状态 → 视图 → 用户操作 → 新状态”的闭环
