可通过 localStorage、sessionStorage、JSON 序列化、IndexedDB 及 MutationObserver 五种方式持久化 JavaScript 修改的 HTML：localStorage 长期保存 innerHTML；sessionStorage 仅限会话期；JSON 结构化存储多区域修改；IndexedDB 处理富格式大体积内容；MutationObserver 实现自动实时保存。
如果您通过 JavaScript 动态修改了网页的 HTML 内容，希望在页面刷新或关闭后仍能保留这些修改，则需要将变更后的 HTML 结构持久化到本地。以下是几种可行的本地存储实现方案：
一、使用 localStorage 保存 innerHTML
localStorage 以 键值对 形式在 浏览器 中长期保存字符串数据，适合存储修改后的完整 HTML 片段。该方法无需 后端 支持，且生命周期不受页面关闭影响。
1、获取目标容器元素的当前 innerHTML 内容，例如：const container = document.getElementById(‘editable’); const htmlContent = container.innerHTML;
2、将 htmlContent 序列化为字符串并存入 localStorage：localStorage.setItem(‘savedHtml’, htmlContent);
立即学习 “ 前端免费学习笔记（深入）”；
3、页面加载时读取并还原：if (localStorage.getItem(‘savedHtml’)) {container.innerHTML = localStorage.getItem(‘savedHtml’); }
二、使用sessionStorage 临时保存修改
sessionStorage 仅在当前会话周期内有效，适用于单次浏览过程中需跨页面保留 HTML 修改但不需长期留存的场景。关闭所有同源标签页后数据自动清除。
1、捕获修改完成事件（如按钮点击或输入结束）后执行：sessionStorage.setItem(‘tempHtml’, document.querySelector(‘#main’).innerHTML);
2、在目标页面初始化时检查是否存在临时 HTML：const temp = sessionStorage.getItem(‘tempHtml’); if (temp) {document.querySelector(‘#main’).innerHTML = temp; }
3、若需清除缓存，可调用 sessionStorage.removeItem(‘tempHtml’) 或sessionStorage.clear()。
三、将修改内容序列化为 JSON 结构存储
当 HTML 修改涉及多个独立区域或需保留原始结构元信息时，直接存储 innerHTML 可能丢失上下文。此时可提取关键节点属性与文本内容，构造成结构化 JSON 对象进行存储。
1、遍历所有被标记为可编辑的元素（如含 data-editable=”true” 属性），收集其 id、tagName、innerText 及 dataset 内容。
2、构造 JSON 对象：const editData = {timestamp: Date.now(), sections: [{ id: ‘header’, html: ‘
新标题
‘ }, {id: ‘content’, html: ‘
更新段落
‘ } ] };
3、保存至 localStorage：localStorage.setItem(‘structuredEdit’, JSON.stringify(editData));
4、恢复时解析 JSON 并按 id 定位元素，逐个赋值 innerHTML：const data = JSON.parse(localStorage.getItem(‘structuredEdit’)); data.sections.forEach(sec => {const el = document.getElementById(sec.id); if (el) el.innerHTML = sec.html; });
四、利用 IndexedDB 存储大量或富格式 HTML 内容
IndexedDB 是浏览器提供的低级 API，支持事务性操作与较大体积数据存储，适用于保存包含 base64 图片、内联样式、脚本片段等复杂 HTML 内容的场景。
1、打开数据库连接：const request = indexedDB.open(‘HtmlStorage’, 1);
2、创建 objectStore 并设置 keyPath 为页面标识符（如window.location.pathname）：if (event.oldVersion === 0) {db.createObjectStore(‘pages’, { keyPath: ‘url’}); }
3、插入或更新记录：const transaction = db.transaction([‘pages’], ‘readwrite’); const store = transaction.objectStore(‘pages’); store.put({url: window.location.pathname, html: document.body.innerHTML, savedAt: new Date() });
4、读取时通过 get 方法检索：store.get(window.location.pathname)，并在 success 回调中还原 DOM。
五、结合 MutationObserver 监听实时变更并自动保存
为避免用户遗忘手动保存，可通过 MutationObserver 监听 DOM 变化，在检测到指定容器内发生结构性修改后自动触发本地存储写入。
1、定义观察选项：const config = {childList: true, subtree: true, attributes: true, characterData: true};
2、初始化观察器并绑定回调：const observer = new MutationObserver(() => {localStorage.setItem(‘autoSavedHtml’, document.getElementById(‘editor’).innerHTML); });
3、开始监听目标节点：observer.observe(document.getElementById(‘editor’), config);
4、页面卸载前强制保存一次：window.addEventListener(‘beforeunload’, () => {localStorage.setItem(‘autoSavedHtml’, document.getElementById(‘editor’).innerHTML); });
