javascript - Will Closures protect my vulnerable data from being destroyed?

Question

I will admit it. I don't understand closures. No matter how many videos I watch, or which explanations I read, they are over my head. Pretty embarrassing, since I saw that about 14,000 people were jumping for joy after reading the explanations here:

How do JavaScript closures work?

But in spite of my ignorance, I think that I might need closures to solve my problem. Here it is: I have set up a couple of <div> Tags for the express purpose of giving me something that I can clone in a JavaScript routine. Here is my <div> structure. It is pure perfection.

<div id="Anchor-Div-01">

<div id="Display-Div-02">

<p>This is a Test</p>

</div>

</div>

I have created several HTML buttons that will cause various JavaScript routines to intentionally mess-up either the paragraph, or the "Display-Div-02" Tag, and I want to be able to put them back in their original form. To that end, when the Web-Page was initially loaded, I used the two equations below to Clone the original "Display-Div-02" Node which was then saved in the "Div_Clone_02" variable ( as shown below. )

var Temp_Anchor_1 = document.querySelector("#Anchor-Div-01");  

var Div_Clone_02 = Temp_Anchor_1.children[0].cloneNode(true); 

I have also placed a "Reset" Button on the page that will remove the messed-up Node, and then copy the "Div_Clone_02" Node into the blank space, to bring everything back to its initial state of perfection.

Unfortunately, my "Div_Clone_02" variable depends on the current ( messed-up ) state of the "id=Display-Div-02" <div> and the <p> Tag, because both of those HTML Tags are hiding inside of children[0] above. So my "Div_Clone_02" node is no longer a Clone of the Original <div>; the Cloned Node is precisely as messed-up as the Display-Div-02 is.

I'm not so stupid as to go back to those two equations and re-calculate the value of the "Div_Clone_02" Node ( while the "Display-Div-02" Tag is in its messed-up state. ) Obviously that would be a mistake. But the browser is surreptitiously re-calculating the Clone behind my back, without me ever asking him to do that.

Can anyone tell me how I can record the initial value of my Clone variable ( "Div_Clone_02" above ), and then save that initial state in a ( dare I say it ? ) a Safe-Space ... where it won't get destroyed by all of the rogue JavaScript routines that are trying to mess-up my perfect Web-Page?

Answer 1

If I am not mistaken I don't think you'll need closures in this case. First things first. A closure is basically a function that is inside another function. Example :

function foo(){
let array = [1,2,3];
  function printArray(){
  console.log(array);
}
printArray();
}

This way the inner function will now have access to the variables inside the outer function.That is why you can do console.log(array) because now you have access to it So now that's cleared up (I hope), to store the initial value you could use localStorage. Just do a google search or watch a youtube video on it and you'll be fine