Question 186979 in Html Question posted in
Some basic documentation can be found here.

Html – localStorage.setItem doesn't work with <img> tag

I got a JS function that reads from specific field of my dict and set the read values on new page to the tags they are related to.

const good_render = id => {
  localStorage.setItem("name", (goods[id].name));
  localStorage.setItem("price", (goods[id].price));
  localStorage.setItem("img", (goods[id].img))};

I apply these values this way:

 <script>
        document.getElementById("name").textContent = name = localStorage.getItem("name");
        document.getElementById("price").textContent = price = localStorage.getItem("price");
        document.getElementById("img").src = img = localStorage.getItem("img")
 </script>

It works perfectly fine with .textContend, however with .src it doesn’t. What might be the problem?
=Update=
Briefly, a button must be pressed so to travel to a product page

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="main_2_buttons.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

    <a href="../good_page/good_page.html" class="button-34" id="good1">good 1</a>
    <a href="../good_page/good_page.html" class="button-34" id="good2">good 2</a>

    <script src="main_2_buttons.js"></script>
</body>
</html>

The product page itself

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="slideritc-slider.css">
<link rel="stylesheet" href="good_page.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
    <h1 class="header1" id = "name"></h1>
</div>
<div class="container">
    <div class="itc-slider" data-slider="itc-slider">
        <div class="itc-slider-wrapper">
          <div class="itc-slider-items">
            <div class="itc-slider-item">
                <img src = "sliderexamplesimages1.jpg">
            </div>
            <div class="itc-slider-item">
                <img src = "sliderexamplesimages2.jpg">
            </div>
            <div class="itc-slider-item">
                <img src = "sliderexamplesimages3.jpg">
            </div>
            <div class="itc-slider-item" id ="img">
                <img src = "sliderexamplesimages4.jpg">
            </div>
          </div>
        </div>
        <button class="itc-slider-btn itc-slider-btn-prev"</button>
        <button class="itc-slider-btn itc-slider-btn-next"</button>
      </div>
</div>
<div> <!--class="nl l1n"-->>
    <div class="header1" id = "price"></div>
    <div>
        <button class="button-3" role="button" id="cart">Add to cart</button>
    </div>
</div>
<script src="slideritc-slider.js" defer></script>
<script>
    document.getElementById("name").textContent = name = localStorage.getItem("name");
    document.getElementById("price").textContent = price = localStorage.getItem("price");
    document.getElementById("img").src = img = localStorage.getItem("img")
</script>
</body>
</html>

And the executed JS

var goods = {                 
    "good1" : {               
        "name" : "good1",
        "price": 100,
        "img"  : "https://static.winestreet.ru/off-line/goods_file/46001/file_S.jpg",
        "in_store": 1,
    },

    "good2" : {
        "name" : "good2",
        "price": 50,
        "img"  : "https://pitersmoke.ru/wa-data/public/shop/products/90/15/11590/images/18550/18550.970.jpg",
        "in_store": 1,
    }
};

document.onclick = event => { 
    if (event.target.id == 'good1') {
        good_render(event.target.id);
    }

    if (event.target.id == 'good2') {
        good_render(event.target.id);
    }
};

const good_render = id => {
    localStorage.setItem("name", (goods[id].name));
    localStorage.setItem("price", (goods[id].price));
    const imgURL = URL.createObjectURL(goods[id].img);
    localStorage.setItem("img", imgURL);  
};
Tags:

2

Answers


  1. 0

    You can use the URL.createObjectURL() method to generate a URL for the image file and then you can store in localstore. Here’s an updated version of your code:

    const good_render = (id) => {
  localStorage.setItem("name", goods[id].name);
  localStorage.setItem("price", goods[id].price);

  // Generate a URL for the image and store it in localStorage
  const imgURL = URL.createObjectURL(goods[id].img);
  localStorage.setItem("img", imgURL);
};

<script>
  document.getElementById("name").textContent = localStorage.getItem("name");
  document.getElementById("price").textContent = localStorage.getItem("price");
  document.getElementById("img").src = localStorage.getItem("img");
</script>
    Login or Signup to reply.
  2. 0

    document.getElementById("img") returns div element as per your HTML in question, so either set id to your img tag instead of div or do:

    var myDivEle = document.getElementById("img"); //its a <div> not <img />
myDivEle.getElementsByTagName('img')[0].src = localStorage.getItem("img");
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search