Home javascript how to read data from

how to read data from [object HTMLDivElement]




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.

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions