Good afternoon, I have a method that generates a HTML structure and writes it to LocalStorage, but when I try to get this structure from LocalStorage, it produces “[object HTMLDivElement]” and I don’t understand how to further process this information, please tell me … I understand that LocalStorage stores only strings, parse this structure into a string to write to LocalStorage, and when the structure is received from LocalStorage by parsing, it also does not work = (

function addItemFromCatalog (imgUrl, descriptionItem, priceItem, colorItem, sizeItem) {
   var shoppingBlock = document.createElement ('div');
   $ (shoppingBlock) .addClass ("shopping-block");
   var shoppingImg = document.createElement ('div');
   $ (shoppingImg) .addClass ("shopping-img");
   var img = document.createElement ('div');
   $ (img) .addClass ("img");
   $ (img) .css ("background-image", 'url (' + imgUrl + ')');
   var shoppingPrice = document.createElement ('span');
   $ (shoppingPrice) .addClass ("shopping-price");
   $ (shoppingPrice) .text ('£' + priceItem);
   var imgInfo = document.createElement ('div');
   $ (imgInfo) .addClass ("img-info");
   var description = document.createElement ('div');
   $ (description) .addClass ("description");
   $ (description) .text (descriptionItem);
   var color = document.createElement ('div');
   $ (color) .addClass ("color");
   $ (color) .text ("Color:" + colorItem);
   var imgSize = document.createElement ('div');
   $ (imgSize) .addClass ("img-size");
   $ (imgSize) .text ('Size:' + sizeItem);
   var quantity = document.createElement ('div');
   $ (quantity) .addClass ("quantity");
   $ (quantity) .text ('Quantity:');
   var delItem = document.createElement ('a');
   $ (delItem) .addClass ("del-item");
   $ (delItem) .attr ("href", "# 0");
   $ (delItem) .text ('Remove item');
   $ (imgInfo) .append (description);
   $ (imgInfo) .append (color);
   $ (imgInfo) .append (imgSize);
   $ (imgInfo) .append (quantity);
   $ (imgInfo) .append (delItem);
   $ (shoppingImg) .append (img);
   $ (shoppingImg) .append (shoppingPrice);
   $ (shoppingBlock) .append (shoppingImg);
   $ (shoppingBlock) .append (imgInfo);
  return shoppingBlock;
}
var output = addItemFromCatalog (imgUrl, descriptionItem, priceItem, colorItem, sizeItem);
localStorage.setItem (id, output);
console.log (localStorage.id); // this is where I get [object HTMLDivElement]

Screen for Grundy:

Answer 1, authority 100%

LocalStorage can store only lines.

To store objects, they must be pre-serialized , for example using JSON.stringify

For the diva case, you should generally take either innerHTML , or outerHTML

But probably even this is not needed, and you just need to store the object on which this div can be built.