javascripthtmljsonserializationeventhandler

Serialising an HTML element that has event handlers

I am currently making a website for a class that I am in. It is supposed to be a store, made in Pure HTML, CSS, and JavaScript (no libraries including jQuery). I am currently attempting at making a functional cart right now. My idea is to take the element that has the information about that item (image and name, but price I kept to be constant throughout to make it simpler). From here, I thought about serialising that element and saving it to localStorage so that I can load it from the cart page. When I try JSON.serialize(product) where product is the element of the item, it only ends up with "{}" and nothing else. XMLS.serialiseToString() only gives the element without the event handler. How am I supposed to make this work?

I also tried loading the event handler in the cart page too, but I cannot figure out a way to get the HTML element from a string. Could someone tell me how to make this work? I looked at a few other questions on here but it does not make much sense to me.

Edit: I got the serialisation and deserialisation working using XMLSerializer. However, I want to change the click event handler after deserialising the element. How am I supposed to make this work?

Solution

  • XMLSerializer should work.

    You will need to provide more code for what you're doing with local storage and your event handler but based on the info you provided, I included some code with comments below.

    //this is a test click handler function to see if it still works after being added to page
function testClickHandler() {
  console.log('I still work after being added to document again.')
}

//initialize XML serializer
var serializer = new XMLSerializer();
//get html element from document
var html = document.querySelector('#serializemecapt');
//convert element to string
var htmlString = serializer.serializeToString(html);

//once element is converted to string you can save in local storage

//after you retrieve the element again from local storage, use the code below to insert it into your document again

//insert element back onto page
document.body.insertAdjacentHTML('afterbegin', htmlString);
    <div id="serializemecapt" onclick="testClickHandler()">Click me to see if the click event still works after I'm pushed back into the document.<br/><br/></div>

    Edit: If you want to change the click handler after serialization, you can do something like this (run the snippet below and see comments):

    //this function will be removed before serialization
function originalFunction() {
  console.log('I am the original function before serialization.')
}

//this function will be added after serialization
function newFunction() {
  console.log('I am the new function after serialization.')
}

//get html element from document
var html = document.querySelector('#serializeme');

//apply originalFunction to div using addEventListener
html.addEventListener('click', originalFunction)


//new function to demonstrate serialization
function serializeHtml() {

  //initialize XML serializer
  var serializer = new XMLSerializer();

  //remove event listener for originalFunction before serialization
  html.removeEventListener('click', originalFunction)

  //serialize html
  var htmlString = serializer.serializeToString(html);

  //insert element back onto page
  document.body.insertAdjacentHTML('afterbegin', htmlString);

  //change innerText on element for example purposes
  html.innerText = 'I am the same div as above after serialization. I have new text and a new function. Click me now and I will run the new function.'

  //add newFunction to div using addEventListener
  html.addEventListener('click', newFunction)
}

//get button element from document
var serialButton = document.querySelector('#serialButton');

//apply serializeHtml function to button using addEventListener
serialButton.addEventListener('click', serializeHtml)
    <div id="serializeme"><b>Click me</b> before serializing to run the original function.<br/><br/></div>

<p><b>Click button below to serialize the div above and apply a new function to the div after serialization.</b></p>

<button id="serialButton">Serialize</button>