jQuery：將img src路徑保存到所選圖像的本地存儲中

Question

• 您好，我有一些基本代碼可以更改應用程序的背景

  我需要為此的img src保存所選圖像的路徑

  當用戶1從中選擇任何圖像時，此div id =“ productImage”

  列表到本地存儲，然后獲取當前選定的圖像

  重新加載頁面形式的本地存儲例如>本地存儲數據

  關鍵background-path：background / image1.png

  感謝幫助

  function Selectbk() { $('.thumbnail').click(function () { var src = $(this).find('img').attr('src').replace('empty.png'); $('#productImage').attr('src', src); }); } 

 ul.chat-gallery { list-style-type: none; display: inline; width: auto; position: relative; left: -0%; } ul.chat-gallery img { max-width: 60px; position: relative; border-radius: 15px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img id="productImage" src="https://vps.nemra-1.com/v4/mobile/img/background/empty.png" style="height:30%;width:40%"> <a class="cancel" href="#"></a> <div class="popup"> <h2>Do you like To Switch Background?</h2> <div class="content"> <ul class="chat-gallery"> <li> <a class="thumbnail" href="#" onclick="Selectbk()"><img src="https://ak6.picdn.net/shutterstock/videos/1027713866/thumb/10.jpg"></a> </li> <li> <a class="thumbnail" href="#" onclick="Selectbk()"><img src="https://ak6.picdn.net/shutterstock/videos/1022870776/thumb/11.jpg"></a> </li> </ul> </div> </div> 

Answer 1

您可以使用$().data代替localStorage ：

 function Selectbk() { $('.thumbnail').click(function() { var src = $(this).find('img').attr('src').replace('empty.png'); $('#productImage').attr('src', src); $('#productImage').data('src', src); }); } $("button").click(function() { console.log($('#productImage').data('src')); }); 

 ul.chat-gallery { list-style-type: none; display: inline; width: auto; position: relative; left: -0%; } ul.chat-gallery img { max-width: 60px; position: relative; border-radius: 15px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a class="cancel" href="#"></a> <button>get src</button> <div class="popup"> <h2>Do you like To Switch Background?</h2> <div class="content"> <ul class="chat-gallery"> <li> <a class="thumbnail" href="#" onclick="Selectbk()"><img src="https://ak6.picdn.net/shutterstock/videos/1027713866/thumb/10.jpg"></a> </li> <li> <a class="thumbnail" href="#" onclick="Selectbk()"><img src="https://ak6.picdn.net/shutterstock/videos/1022870776/thumb/11.jpg"></a> </li> </ul> </div> </div> <img id="productImage" src="https://vps.nemra-1.com/v4/mobile/img/background/empty.png" style="height:30%;width:40%">