可在浏览器中用Web Storage API持久化保存HTML数据：一、localStorage永久存键值对；二、sessionStorage暂存标签页级数据；三、存取HTML字符串片段；四、IndexedDB存复杂结构化数据；五、结合data-*属性批量序列化表单。
如果需要在
浏览器
中持久化保存HTML页面中的数据，而不依赖服务器端存储，则可以利用Web Storage API提供的本地存储机制。以下是实现此目标的具体方法：
一、使用localStorage保存数据
localStorage是一种持久化的
键值对
存储方式，数据在浏览器关闭后仍保留，且同一域名下的所有页面均可访问。
1、在JavaScript中调用
方法，传入键名和字符串值。
2、例如：
localStorage.setItem('username', 'Alice')
将字符串'Alice'以键'username'存入本地存储。
立即学习
“
前端免费学习笔记（深入）
”；
3、读取时使用
，返回
'Alice'
。
4、删除指定键值对使用
，清空全部数据使用
。
二、使用
session
Storage保存临时数据
sessionStorage与localStorage接口一致，但其生命周期仅限于当前浏览器标签页会话，关闭标签页后数据自动清除。
1、通过
保存序列化后的表单对象。
2、读取时需用
还原为对象，确保
解析前校验返回值是否为null或undefined
。
3、该存储适用于多步骤表单的中间状态暂存，防止用户刷新页面丢失输入内容。
三、将HTML元素内容直接存入Web Storage
可提取DOM节点的outerHTML或innerText，并作为字符串保存，后续用于恢复页面片段。
1、获取某个
的完整HTML结构：
document.getElementById('content').outerHTML
。
2、执行
完成存储。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
3、恢复时通过
写入DOM。
4、注意：若HTML含内联脚本或事件绑定，需额外处理，否则
恢复后不会自动执行脚本或重建事件监听器
。
四、使用IndexedDB存储结构化HTML相关数据
当需要存储大量、复杂或需索引查询的数据（如带元信息的HTML片段集合），IndexedDB提供对象仓库和事务支持。
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属性：
。
2、遍历所有带该属性的元素：
。
3、构建映射对象：
。
4、最终执行
，确保
所有值均为可序列化类型，避免函数或DOM节点直接存入
。
window.localStorage.setItem()window.localStorage.getItem('username')localStorage.removeItem('username')localStorage.clear()sessionStorage.setItem('tempForm', JSON.stringify({field: 'value'}))JSON.parse(sessionStorage.getItem('tempForm'))localStorage.setItem('savedSection', elementHTML)document.getElementById('target').innerHTML = localStorage.getItem('savedSection')window.indexedDB.open('htmlStore', 1)document.querySelectorAll('[data-storage-key]')const data = {}; els.forEach(el => data[el.dataset.storageKey] = el.value);localStorage.setItem('formData', JSON.stringify(data))