使用sessionStorage存储克隆HTML节点后无法正常读取复用如何解决？

问题原因 #

• sessionStorage 仅支持存储字符串类型的数据，直接传入克隆的DOM节点对象时，浏览器会自动调用对象的toString()方法，最终存储的是"[object HTMLElement]"这类无意义的字符串，因此读取后无法得到预期的HTML内容。

解决方案 #

存的时候先将DOM节点序列化为HTML字符串，读取后再将字符串转回DOM节点使用即可，完整实现代码如下：

存储阶段代码 #

var exp561CardFour = document.getElementById('dashboard_item_four');
// 获取整个节点的完整HTML字符串（包含节点自身标签）
var cardHtml = exp561CardFour.outerHTML;
sessionStorage.setItem('storedCardFour', cardHtml);

读取使用阶段代码 #

// 读取存储的HTML字符串
var grabCardHtml = sessionStorage.getItem('storedCardFour');
if (grabCardHtml) {
  // 临时容器用于将HTML字符串转换为DOM节点
  var tempContainer = document.createElement('div');
  tempContainer.innerHTML = grabCardHtml;
  // 得到还原后的DOM节点
  var grabCardFour = tempContainer.firstChild;
  // 按需将节点插入到目标DOM位置即可
  // 示例：document.getElementById('target_box').appendChild(grabCardFour)
}

注意事项 #

• HTML序列化不会保留DOM上绑定的JS事件，如有事件需求可将事件委托到父级元素，或读取还原后重新绑定事件。
• 若原节点带有id属性，还原后插入页面前建议修改id值，避免页面出现id重复冲突。

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