Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

94
Views
JS sessionStorage to store HTML node and then re-use it later

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:

enter image description here

Please help :)

edit: FYI clnCardFour just contains some HTML and it works ok

enter image description here

edit with Parking Masters suggestion in the console:

enter image description here

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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

about 4 years ago · Juan Pablo Isaza Report

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!