La API de almacenamiento (sessionStorage/localStorage) solo almacena cadenas. Cuando usted llama:

sessionStorage.setItem('storedCardFour', clnCardFour);

la API usa el método .toString() contra el objeto clnCardFour , que devuelve [object HTMLLIElement] .

Entonces necesita la representación de cadena de ese Nodo. Puede lograrlo obteniendo el OuterHTML del Nodo de esta manera:

sessionStorage.setItem('storedCardFour', clnCardFour.outerHTML);

Cuando necesite restaurar ese nodo, simplemente use la propiedad .innerHTML del nodo principal para volver a colocarlo en el DOM.

 let div = document.querySelector('div'); let exp561CardFour = document.getElementById('dashboard_item_four'); sessionStorage.setItem('storedCardFour', exp561CardFour.outerHTML); let clonedFromStorage = sessionStorage.getItem('storedCardFour'); div.innerHTML += clonedFromStorage

 <div> <i id="dashboard_item_four">Hello there!</i> </div>

Y aquí hay un ejemplo de JS Bin

El HTMLIElement es un elemento <i> , está almacenando todo el objeto del elemento en el almacenamiento.

Puede usar JSON (Notación de objetos de JavaScript) .stringify({}) para convertir en cadena el elemento y luego analizarlo nuevamente para obtener el elemento.

Aquí hay un ejemplo de eso:

 var myEl = document.getElementById("my-el"); alert("This will not print the object: " + myEl); alert("This will print the object: " + JSON.stringify(myEl));

 <i id="my-el"></i>

Los objetos desbordados no se clasifican en cadenas porque el objeto es demasiado largo.

Con jQuery:

 var myEl = $("my-el"); alert("This will not print the jQuery object: " + myEl); alert("This will print the jQuery object: " + JSON.stringify(myEl));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <i id="my-el"></i>

Más sobre JSON.stringify y JSON.parse en MDN.

(Tenga cuidado con lo que almacena en sessionStorage , solo puede almacenar hasta 2kB a la vez).

Ahora para obtener el objeto analizado usando JSON.parse :

 var myObj = "{}"; myObj; // "{}" JSON.parse(myObj); // Object { ... }

He reunido un ejemplo en vivo de todo:

 var exp561CardFour = document.getElementById('dashboard_item_four'); var clnCardFour = exp561CardFour.cloneNode(true); sessionStorage.setItem('storedCardFour', JSON.stringify(clnCardFour)); // When in an <iframe>, it'll say The operation is insecure." var grabCardFour = JSON.parse(sessionStorage.getItem('storedCardFour'));

 <i id="dashboard_item_four"><i>

El fragmento de código es de stacksnippets.net y no funcionará debido a problemas de seguridad de iframe.

Sin embargo, pruébelo en su servidor/archivo local y buena suerte.