如何從 [object HTMLDivElement] 中檢索 DIV 元素？

Question

我正在使用本地存儲來存儲 div 元素。 但是最后我想從本地存儲中檢索該 div 元素，但每次我這樣做時，我都會返回輸出：“[object HTMLDivElement]”，這是一個字符串

有什么方法可以將這個接收到的結果轉換成一個 HTML 元素，這樣我就可以得到我在開始時存儲的相同的 div？

Answer 1

一個好主意是將 DOM 對象轉換為純 HTML 字符串，然后將其保存到本地存儲中。

查看此以獲得更多信息： Parse HTML String to DOM and convert it back to string

Answer 2

localStorage 只能存儲字符串。 您不能在其中存儲 DOM 節點，JS 只會“是的，這不起作用，讓我先將其轉換為字符串”，並將使用通用的“括號中的對象類型”字符串。

如果你想存儲一個 HTML 元素，不要存儲元素本身，而是存儲它的外層HTML 源代碼，它是一個字符串。

// convert page element to string:
function storeElement(element, keyName) {
  localStorage.setItem(keyName, element.outerHTML);
}

// reconstitute the page element from string:
function retrieveElement(keyName, preserve=false) {
  const stored = localStorage.getItem(keyName);
  if (!preserve) localStorage.removeItem(keyName);
  const helper = document.createElement(`section`);
  helper.innerHTML = stored;
  return helper.childNodes[0];
}