如何让iframe/embed/object标签以localStorage中的HTML为源？

要将localStorage中存储的HTML内容通过embed/iframe/object标签展示，你可以通过客户端生成可访问的URL实现，无需服务器支持，以下是两种可行方案：

方法1：Blob URL（推荐，支持大体积HTML内容） #

Blob URL是浏览器生成的临时本地URL，适合展示较大的HTML内容，性能更优：

// 从localStorage获取存储的HTML内容
const storedHtml = localStorage.getItem('someHTML');

// 创建Blob对象，指定MIME类型为text/html
const htmlBlob = new Blob([storedHtml], { type: 'text/html' });

// 生成Blob格式的URL
const blobUrl = URL.createObjectURL(htmlBlob);

// 赋值给iframe（也可替换为embed/object标签）
document.getElementById('target-iframe').src = blobUrl;

// （可选）当不再需要时释放资源，避免内存泄漏
// window.addEventListener('unload', () => {
//   URL.revokeObjectURL(blobUrl);
// });

对应HTML结构示例：

<iframe id="target-iframe" width="100%" height="600"></iframe>

方法2：Data URI（适合小体积HTML内容） #

Data URI将HTML内容直接编码为URL字符串，适合内容较短的场景（注意不同浏览器对Data URI的长度有上限）：

const storedHtml = localStorage.getItem('someHTML');

// 将HTML内容编码为Data URI格式
const dataUri = `data:text/html;charset=utf-8,${encodeURIComponent(storedHtml)}`;

// 赋值给embed标签（也可替换为iframe/object标签）
document.getElementById('target-embed').src = dataUri;

对应HTML结构示例：

<embed id="target-embed" width="100%" height="600"></embed>

内容的提问来源于stack exchange，提问作者Joshua Robison