localStorage.setItem 不适用于 标签。

huangapple go评论104阅读模式
英文:

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

问题

我有一个JS函数,它从我的字典的特定字段中读取数据,并将读取的值设置到与它们相关联的标签上的新页面。

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

我使用以下方式应用这些值:

  1. <script>
  2. document.getElementById("name").textContent = localStorage.getItem("name");
  3. document.getElementById("price").textContent = localStorage.getItem("price");
  4. document.getElementById("img").src = localStorage.getItem("img");
  5. </script>

它可以正常使用.textContent,但使用.src时出现问题。可能的问题是什么?

=更新=
简要来说,必须按下按钮才能跳转到产品页面。

产品页面本身:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <link rel="stylesheet" href="slider\itc-slider.css">
  5. <link rel="stylesheet" href="good_page.css">
  6. <meta charset="UTF-8">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9. <title>Document</title>
  10. </head>
  11. <body>
  12. <div>
  13. <h1 class="header1" id="name"></h1>
  14. </div>
  15. <div class="container">
  16. <div class="itc-slider" data-slider="itc-slider">
  17. <div class="itc-slider-wrapper">
  18. <div class="itc-slider-items">
  19. <div class="itc-slider-item">
  20. <img src="slider\examples\images\1.jpg">
  21. </div>
  22. <div class="itc-slider-item">
  23. <img src="slider\examples\images\2.jpg">
  24. </div>
  25. <div class="itc-slider-item">
  26. <img src="slider\examples\images\3.jpg">
  27. </div>
  28. <div class="itc-slider-item" id="img">
  29. <img src="slider\examples\images\4.jpg">
  30. </div>
  31. </div>
  32. </div>
  33. <button class="itc-slider-btn itc-slider-btn-prev"></button>
  34. <button class="itc-slider-btn itc-slider-btn-next"></button>
  35. </div>
  36. </div>
  37. <div>
  38. <div class="header1" id="price"></div>
  39. <div>
  40. <button class="button-3" role="button" id="cart">Add to cart</button>
  41. </div>
  42. </div>
  43. <script src="slider\itc-slider.js" defer></script>
  44. <script>
  45. document.getElementById("name").textContent = localStorage.getItem("name");
  46. document.getElementById("price").textContent = localStorage.getItem("price");
  47. document.getElementById("img").src = localStorage.getItem("img");
  48. </script>
  49. </body>
  50. </html>

执行的JS:

  1. var goods = {
  2. "good1": {
  3. "name": "good1",
  4. "price": 100,
  5. "img": "https://static.winestreet.ru/off-line/goods_file/46001/file_S.jpg",
  6. "in_store": 1
  7. },
  8. "good2": {
  9. "name": "good2",
  10. "price": 50,
  11. "img": "https://pitersmoke.ru/wa-data/public/shop/products/90/15/11590/images/18550/18550.970.jpg",
  12. "in_store": 1
  13. }
  14. };
  15. document.onclick = event => {
  16. if (event.target.id == 'good1') {
  17. good_render(event.target.id);
  18. }
  19. if (event.target.id == 'good2') {
  20. good_render(event.target.id);
  21. }
  22. };
  23. const good_render = id => {
  24. localStorage.setItem("name", goods[id].name);
  25. localStorage.setItem("price", goods[id].price);
  26. localStorage.setItem("img", goods[id].img);
  27. };
英文:

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.

  1. const good_render = id =&gt; {
  2. localStorage.setItem(&quot;name&quot;, (goods[id].name));
  3. localStorage.setItem(&quot;price&quot;, (goods[id].price));
  4. localStorage.setItem(&quot;img&quot;, (goods[id].img))};

I apply these values this way:

  1. &lt;script&gt;
  2. document.getElementById(&quot;name&quot;).textContent = name = localStorage.getItem(&quot;name&quot;);
  3. document.getElementById(&quot;price&quot;).textContent = price = localStorage.getItem(&quot;price&quot;);
  4. document.getElementById(&quot;img&quot;).src = img = localStorage.getItem(&quot;img&quot;)
  5. &lt;/script&gt;

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

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4. &lt;link rel=&quot;stylesheet&quot; href=&quot;main_2_buttons.css&quot;&gt;
  5. &lt;meta charset=&quot;UTF-8&quot;&gt;
  6. &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  7. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  8. &lt;title&gt;Document&lt;/title&gt;
  9. &lt;/head&gt;
  10. &lt;body&gt;
  11. &lt;a href=&quot;../good_page/good_page.html&quot; class=&quot;button-34&quot; id=&quot;good1&quot;&gt;good 1&lt;/a&gt;
  12. &lt;a href=&quot;../good_page/good_page.html&quot; class=&quot;button-34&quot; id=&quot;good2&quot;&gt;good 2&lt;/a&gt;
  13. &lt;script src=&quot;main_2_buttons.js&quot;&gt;&lt;/script&gt;
  14. &lt;/body&gt;
  15. &lt;/html&gt;

The product page itself

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4. &lt;link rel=&quot;stylesheet&quot; href=&quot;slider\itc-slider.css&quot;&gt;
  5. &lt;link rel=&quot;stylesheet&quot; href=&quot;good_page.css&quot;&gt;
  6. &lt;meta charset=&quot;UTF-8&quot;&gt;
  7. &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  8. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  9. &lt;title&gt;Document&lt;/title&gt;
  10. &lt;/head&gt;
  11. &lt;body&gt;
  12. &lt;div&gt;
  13. &lt;h1 class=&quot;header1&quot; id = &quot;name&quot;&gt;&lt;/h1&gt;
  14. &lt;/div&gt;
  15. &lt;div class=&quot;container&quot;&gt;
  16. &lt;div class=&quot;itc-slider&quot; data-slider=&quot;itc-slider&quot;&gt;
  17. &lt;div class=&quot;itc-slider-wrapper&quot;&gt;
  18. &lt;div class=&quot;itc-slider-items&quot;&gt;
  19. &lt;div class=&quot;itc-slider-item&quot;&gt;
  20. &lt;img src = &quot;slider\examples\images\1.jpg&quot;&gt;
  21. &lt;/div&gt;
  22. &lt;div class=&quot;itc-slider-item&quot;&gt;
  23. &lt;img src = &quot;slider\examples\images\2.jpg&quot;&gt;
  24. &lt;/div&gt;
  25. &lt;div class=&quot;itc-slider-item&quot;&gt;
  26. &lt;img src = &quot;slider\examples\images\3.jpg&quot;&gt;
  27. &lt;/div&gt;
  28. &lt;div class=&quot;itc-slider-item&quot; id =&quot;img&quot;&gt;
  29. &lt;img src = &quot;slider\examples\images\4.jpg&quot;&gt;
  30. &lt;/div&gt;
  31. &lt;/div&gt;
  32. &lt;/div&gt;
  33. &lt;button class=&quot;itc-slider-btn itc-slider-btn-prev&quot;&lt;/button&gt;
  34. &lt;button class=&quot;itc-slider-btn itc-slider-btn-next&quot;&lt;/button&gt;
  35. &lt;/div&gt;
  36. &lt;/div&gt;
  37. &lt;div&gt; &lt;!--class=&quot;nl l1n&quot;--&gt;&gt;
  38. &lt;div class=&quot;header1&quot; id = &quot;price&quot;&gt;&lt;/div&gt;
  39. &lt;div&gt;
  40. &lt;button class=&quot;button-3&quot; role=&quot;button&quot; id=&quot;cart&quot;&gt;Add to cart&lt;/button&gt;
  41. &lt;/div&gt;
  42. &lt;/div&gt;
  43. &lt;script src=&quot;slider\itc-slider.js&quot; defer&gt;&lt;/script&gt;
  44. &lt;script&gt;
  45. document.getElementById(&quot;name&quot;).textContent = name = localStorage.getItem(&quot;name&quot;);
  46. document.getElementById(&quot;price&quot;).textContent = price = localStorage.getItem(&quot;price&quot;);
  47. document.getElementById(&quot;img&quot;).src = img = localStorage.getItem(&quot;img&quot;)
  48. &lt;/script&gt;
  49. &lt;/body&gt;
  50. &lt;/html&gt;

And the executed JS

  1. var goods = {
  2. &quot;good1&quot; : {
  3. &quot;name&quot; : &quot;good1&quot;,
  4. &quot;price&quot;: 100,
  5. &quot;img&quot; : &quot;https://static.winestreet.ru/off-line/goods_file/46001/file_S.jpg&quot;,
  6. &quot;in_store&quot;: 1,
  7. },
  8. &quot;good2&quot; : {
  9. &quot;name&quot; : &quot;good2&quot;,
  10. &quot;price&quot;: 50,
  11. &quot;img&quot; : &quot;https://pitersmoke.ru/wa-data/public/shop/products/90/15/11590/images/18550/18550.970.jpg&quot;,
  12. &quot;in_store&quot;: 1,
  13. }
  14. };
  15. document.onclick = event =&gt; {
  16. if (event.target.id == &#39;good1&#39;) {
  17. good_render(event.target.id);
  18. }
  19. if (event.target.id == &#39;good2&#39;) {
  20. good_render(event.target.id);
  21. }
  22. };
  23. const good_render = id =&gt; {
  24. localStorage.setItem(&quot;name&quot;, (goods[id].name));
  25. localStorage.setItem(&quot;price&quot;, (goods[id].price));
  26. const imgURL = URL.createObjectURL(goods[id].img);
  27. localStorage.setItem(&quot;img&quot;, imgURL);
  28. };

答案1

得分: 0

document.getElementById("img") 返回根据您的HTML问题而言的div元素,所以要么将id设置为您的img标签,而不是div,或者执行以下操作:

  1. var myDivEle = document.getElementById("img"); // 这是一个<div>而不是<img />
  2. myDivEle.getElementsByTagName('img')[0].src = localStorage.getItem("img");
英文:

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

  1. var myDivEle = document.getElementById(&quot;img&quot;); //its a &lt;div&gt; not &lt;img /&gt;
  2. myDivEle.getElementsByTagName(&#39;img&#39;)[0].src = localStorage.getItem(&quot;img&quot;);

huangapple
  • 本文由 发表于 2023年6月15日 16:14:28
  • 转载请务必保留本文链接:https://go.coder-hub.com/76480434.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定