如何将SVG画布的完整状态保存到Local Storage中？

SVG本身是纯文本格式的XML结构，存储到LocalStorage的实现比光栅画布更简单，具体步骤如下：

1. 首先获取SVG完整字符串内容
   使用浏览器内置的XMLSerializerAPI直接将SVG DOM元素序列化为文本：

// 替换为你编辑器内的SVG根元素选择器
const svgCanvas = document.querySelector('#editor-svg-root');
const serializer = new XMLSerializer();
const svgContentStr = serializer.serializeToString(svgCanvas);

2. 写入LocalStorage
   LocalStorage原生支持字符串类型的键值对存储，直接写入即可：

// 自定义存储键名，建议加业务前缀避免冲突
localStorage.setItem('my_svg_editor_saved_content', svgContentStr);

3. 恢复存储的SVG内容
   读取存储的字符串后用DOMParser转回DOM元素即可插入回编辑器画布：

const savedContent = localStorage.getItem('my_svg_editor_saved_content');
if (savedContent) {
  const parser = new DOMParser();
  const svgDoc = parser.parseFromString(savedContent, 'image/svg+xml');
  const restoredSvg = svgDoc.documentElement;
  // 替换当前编辑器的空白SVG画布
  document.querySelector('#editor-svg-root').replaceWith(restoredSvg);
}

如果需要和canvas toDataURL()完全一致的使用体验，也可以将SVG转成data URL存储，这种格式的内容可以直接赋值给<img>的src属性，也可以用于canvas绘制，实现和光栅画布导出资源完全相同的用法：

const svgCanvas = document.querySelector('#editor-svg-root');
const svgStr = new XMLSerializer().serializeToString(svgCanvas);
// 编码特殊字符生成标准data URL
const svgDataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgStr)}`;
// 存入LocalStorage
localStorage.setItem('my_svg_editor_dataurl', svgDataUrl);

注意事项 #

• LocalStorage单域名默认存储上限为5MB左右，如果你的SVG包含大量base64内嵌位图、超复杂路径等大体积内容，会超出存储上限，这类场景建议改用IndexedDB做持久化存储。
• 要确保你的SVG根元素带有正确的xmlns="http://www.w3.org/2000/svg"属性，否则序列化后的内容转dataURL或者导出为文件时会无法被正常识别。

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