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

Question

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?

No, the data type is final. It needs to be a string. If you would like to keep reference of an element, you would need to go about it differently. Perhaps explain why you need to do this for a more mature answer. — BGPHiJACK, Jul 04 '22 at 17:49

score 1 · Answer 1 · answered Jul 04 '22 at 17:50

1

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

answered Jul 04 '22 at 17:50

siteimprove_rerr

11
2

Mike 'Pomax' Kamermans · Answer 2 · 2022-07-04T18:03:47.060

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

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

2 Answers2