如何获取完整DOM元素？innerHTML仅返回内部内容的解决方法

问题原因 #

localStorage仅支持存储字符串类型数据，直接传入DOM元素对象会被转换为[object HTMLElement]这类无意义的字符串，无法保留完整元素结构；而innerHTML仅能获取元素内部的HTML内容，不包含元素自身的标签。

修正方案 #

使用DOM元素的outerHTML属性，它会返回包含元素自身及所有内部内容的完整HTML字符串，这样就能将完整元素结构存入localStorage。

修正后的代码：

function storagePlusQuantity(product, productId) {
    const storageId = 'product' + productId;
    // 获取包含元素自身的完整HTML字符串
    const fullElementHTML = product.outerHTML;
    localStorage.setItem(storageId, fullElementHTML);
    // setItem会自动覆盖已有值，无需提前执行removeItem
    console.log(fullElementHTML);
}

补充：从localStorage恢复元素 #

如果之后需要将存储的HTML字符串还原为DOM元素，可使用以下方式：

function getStoredElement(productId) {
    const storageId = 'product' + productId;
    const storedHTML = localStorage.getItem(storageId);
    if (!storedHTML) return null;
    
    // 方式1：通过DOMParser解析
    const parser = new DOMParser();
    const doc = parser.parseFromString(storedHTML, 'text/html');
    return doc.body.firstElementChild;
    
    // 方式2：借助容器元素转换
    // const container = document.createElement('div');
    // container.innerHTML = storedHTML;
    // return container.firstElementChild;
}

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