dom状态保持关键在于存储用户可见的有意义状态并还原；url哈希适合单页内tab/锚点切换，需规范处理；localstorage适合跨刷新的结构化数据；查询参数适合跳转间轻量状态传递；需手动恢复光标、滚动等原生状态。
dom 操作后的状态保持，关键不是“记住操作动作”，而是把用户可见的、有意义的状态（比如哪个 tab 被选中、输入框填了什么、元素拖到哪了、列表展开到哪一项）存下来，并在页面加载或切换时还原它。方法选对了，体验就自然连贯。
用 URL 片段（hash）控制显隐状态
适合单页内分类切换、Tab 导航、锚点定位这类场景。# 后的内容不触发刷新，也不发给后端，但 JS 可随时读写。
- 读取时先 解码 + 小写 + 过滤非法字符：比如
location.hash.replace(/^#/, '').toLowerCase().replace(/[^a-z0-9_-]/g, '')，避免中文、大小写、特殊符号导致匹配失败 - 用
document.getElementById(id)查找目标元素，别用querySelector拼字符串，ID 里有 . 或 [ 会出错 - 切换时用
history.pushState(null, '', `#${id}`)，而不是直接赋值location.hash，防止自动滚动和重复触发事件 - 首次加载要手动执行一次状态同步——
hashchange事件不会在页面打开时自动触发
用 localStorage 存结构化状态
适合需要跨刷新保留的动态内容，比如用户自己添加的便签、拖拽后的位置、表单草稿、折叠面板展开状态等。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 不要存 DOM 节点本身，而是提取关键字段建模：id、text、x/y 坐标、宽高、颜色、是否展开等，组成纯对象
- 用
JSON.stringify()序列化后存入localStorage；加载时用JSON.parse()还原，再逐个重建 DOM 或设置属性 - 表单类元素（input/textarea/select）的值必须单独保存和恢复，
location.hash和初始 HTML 都不包含这些运行时状态 - 注意存储上限（通常 5MB），大状态可考虑压缩或只存变更部分
用 URL 查询参数传递轻量状态
适合页面跳转后仍需保持筛选条件、当前标签、分页页码等场景，比 cookie 更透明、更易调试。
- 跳转前拼接参数：如
window.location.href = 'list.html?category=design&sort=date' - 页面加载后解析参数：用正则或
URLSearchParams提取，再据此激活对应菜单、设置下拉选中项、加载对应数据 - 参数名建议小写、无空格、用连字符分隔，避免编码歧义；中文参数务必用
encodeURIComponent编码 - 不推荐用于敏感或大量数据，URL 长度有限制，且会暴露在浏览器地址栏和服务器日志中
手动接管易丢失的原生状态
虚拟 DOM 或 JS 控制的更新常会重置光标、滚动位置、选中文本等——这些浏览器不会自动保留，得你来管。
- 对
input和textarea，在更新前缓存selectionStart、selectionEnd和scrollTop，更新后再恢复 - 对滚动容器，监听
scroll事件暂存scrollTop或scrollLeft，DOM 更新完成用requestAnimationFrame异步恢复，避免布局抖动 - 确保表单控件的
name和type不变，否则浏览器会当成新控件，丢掉 focus 和 value - 列表项用稳定
key（别用数组索引），让框架能正确复用节点，而不是销毁重建
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
