可在浏览器中用 Web Storage API 持久化保存 HTML 数据：一、localStorage 永久存键值对；二、sessionStorage 暂存标签页级数据；三、存取 HTML 字符串片段；四、IndexedDB 存复杂结构化数据；五、结合 data-* 属性批量序列化表单。
如果需要在 浏览器 中持久化保存 HTML 页面中的数据，而不依赖服务器端存储，则可以利用 Web Storage API 提供的本地存储机制。以下是实现此目标的具体方法：
一、使用 localStorage 保存数据
localStorage 是一种持久化的 键值对 存储方式，数据在浏览器关闭后仍保留，且同一域名下的所有页面均可访问。
1、在 JavaScript 中调用 window.localStorage.setItem() 方法，传入键名和字符串值。
2、例如：localStorage.setItem(‘username’, ‘Alice’)将字符串 ’Alice’ 以键 ’username’ 存入本地存储。
立即学习 “ 前端免费学习笔记（深入）”；
3、读取时使用window.localStorage.getItem('username')，返回‘Alice’。
4、删除指定键值对使用localStorage.removeItem('username')，清空全部数据使用localStorage.clear()。
二、使用sessionStorage 保存临时数据
sessionStorage 与 localStorage 接口一致，但其生命周期仅限于当前浏览器标签页会话，关闭标签页后数据自动清除。
1、通过 sessionStorage.setItem('tempForm', JSON.stringify({field: 'value'})) 保存序列化后的表单对象。
2、读取时需用 JSON.parse(sessionStorage.getItem('tempForm')) 还原为对象，确保 解析前校验返回值是否为 null 或 undefined。
3、该存储适用于多步骤表单的中间状态暂存，防止用户刷新页面丢失输入内容。
三、将 HTML 元素内容直接存入 Web Storage
可提取 DOM 节点的 outerHTML 或 innerText，并作为字符串保存，后续用于恢复页面片段。
1、获取某个
2、执行 localStorage.setItem('savedSection', elementHTML) 完成存储。
3、恢复时通过 document.getElementById('target').innerHTML = localStorage.getItem('savedSection') 写入 DOM。
4、注意：若 HTML 含内联脚本或事件绑定，需额外处理，否则 恢复后不会自动执行脚本或重建事件监听器。
四、使用 IndexedDB 存储结构化 HTML 相关数据
当需要存储大量、复杂或需索引查询的数据（如带元信息的 HTML 片段集合），IndexedDB 提供对象仓库和事务支持。
1、通过 window.indexedDB.open('htmlStore', 1) 打开数据库并定义 objectStore。
2、在 upgrade 事件中创建 store，例如：store.createIndex(‘byTimestamp’, ‘timestamp’, {unique: false})。
3、添加数据时使用 transaction.objectStore(‘pages’).add({html: ‘
Hello
‘, timestamp: Date.now(), url: ‘/page1’})。
4、查询时可通过 index 检索特定时间范围内的 HTML 记录，适合构建本地缓存页面库。
五、结合 data-* 属性与 Web Storage 实现语义化存储
利用 HTML 元素的自定义 data 属性标记可存储字段，在提交前批量提取并序列化至 localStorage。
1、在表单中为输入框添加 data-storage-key 属性：ail”>。
2、遍历所有带该属性的元素：document.querySelectorAll('[data-storage-key]')。
3、构建映射对象：const data = {}; els.forEach(el => data[el.dataset.storageKey] = el.value);。
4、最终执行 localStorage.setItem('formData', JSON.stringify(data))，确保 所有值均为可序列化类型，避免函数或 DOM 节点直接存入。
