How to retrieve a DIV element from [object HTMLDivElement]?-CodePudding

I am using local storage to store a div element. However in the end I want to retrieve that div element from local storage, but every time I do that, I get back the output: "[object HTMLDivElement]", which is a string

Is there any way to convert this received result into an HTML element, so that I can get the same div, that I stored at the beginning?

CodePudding user response：

A good idea would be to transform the DOM object into a pure HTML string and then save it to local storage.

Look at this for further info: Parse HTML String to DOM and convert it back to string

CodePudding user response：

localStorage can only store strings. You can't store DOM nodes in it, JS will just go "yeah that doesn't work, let me convert it to a string first" and will use the generic "object type in brackets" string.

If you want to store an HTML element, don't store the element itself but store its outerHTML source code, which is a string.

// 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];
}