Store HtmlImageElement into local storage

Hi All,

I am building image tag dynamically inside Kendo grid as shown below :-

<img title=\"Show Details\" style=\"width:30px; cursor: pointer;\" onclick='showDetails(this)' src=\"images/showDetails.png\" />

It contains showDetails method. When UI renders and i click on above image showDetails method is called which is as follows:-

function showDetails(element) 
{
                
                    if (element != undefined)
                    {
                        localStorage.showFormElement = JSON.stringify(element);
                    }
                    else
                    {
                        element = JSON.parse(localStorage.showFormElement);
                    }

                    localStorage.showFormElement = JSON.stringify(element);
                    
                    var row = $(element).closest("tr");
}

When first time i click on above image then i get showDetails parameter element as an [object HTMLImageElement] and i am storing this object into local storage as above but it stores as "{}" or
if i do not stringify element HTML object and directly store element then local storage will store element as an "object" which will be a string.
So next time when i refresh a browser, then i will fetch HTMLImageElement object
from local storage but as i explained it is "{}" then i am not able to get the exact HTMLImageElement object. When i click on image icon then i come to know that which row has been clicked and i show the row information on div.

var row = $(element).closest("tr")-> this will return selected row based on element passed.

So how to store [object HTMLImageElement] in a local storage because next time when page is refreshed then i can fetch values/object from local storage and do some operation.