I need to clone some HTML content, store it in sessionStorage, to then re-deploy the stored HTML back into the DOM on another page. For the moment with my testing I'm just doing it all on one page and summoning the sessionStorage with a page refresh.
So, here is what I have come up with so far.
var exp561CardFour = document.getElementById('dashboard_item_four');
var clnCardFour = exp561CardFour.cloneNode(true);
sessionStorage.setItem('storedCardFour', clnCardFour);
When I go to grab the HTML with this bit of code in the console...
var grabCardFour = sessionStorage.getItem('storedCardFour');
...I end up with this:
Please help :)
edit: FYI clnCardFour just contains some HTML and it works ok
edit with Parking Masters suggestion in the console:
The Storage API (sessionStorage/localStorage) only stores strings. When you call:
sessionStorage.setItem('storedCardFour', clnCardFour);
the API uses the .toString() method against the object clnCardFour - which returns [object HTMLLIElement].
So you need the string representation of that Node. You can achieve that by getting the OuterHTML of the Node like this:
sessionStorage.setItem('storedCardFour', clnCardFour.outerHTML);
When you need to restore that Node, simply use the parent Node's .innerHTML property to place it back into the 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>
And here is a JS Bin Example
The HTMLIElement is an <i> element, you're storing the entire element object in the storage.
You can use JSON (JavaScript Object Notation) .stringify({}) to stringify the element and then parse it again to get the element.
Here's an example of that:
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>
Overflowed objects are not stringified as the object is too long.
With 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>
More about JSON.stringify and JSON.parse at MDN.
(Be careful what you store in sessionStorage, you can only store up to 2kB at a time).
Now to get the parsed object using JSON.parse:
var myObj = "{}";
myObj; // "{}"
JSON.parse(myObj); // Object { ... }
I've put together a live example of everything:
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>
The code snippet is from stacksnippets.net and will not work because of iframe security issues.
However, try it on your local server / file, and good luck.