Question

我正在寻找一种通过将所选图像存储在数组中来存储所选图像的方法。保存选定图像的索引，并单击按钮（get item（“完成”的id）后，我需要对数组中选定的图像进行字符串化，以便将其存储在然后，我需要从本地存储中提取数据，并将其转换回一个对象，在页面上写入所选图像，然后从页面上的本地存储导入所选图像。如果对数组的长度进行了更改，则该页面应该可以工作。

此外，我需要使用复选框来选择或取消选择该项目，但是目前只有在单击图像时它才起作用。谢谢！请只使用javascript

   <html>
    <head>
      <style>
        img.selected {opacity:0.5;}
      </style>
    </head>

    <body onload="vegetable()">
       <button id="done" onclick="new()">get item </button>
       <div id="idmain"></div>
       <script>
         function new() { }
         var hey = [
            { item: "knife", fruit: "banana.png" },
            { item: "fork", fruit: "apple.png" },
            { item: "sword", fruit: "kiwi.jpg" },
            { item: "spoon", fruit: "mango.jpg" }
         ];

         function vegetable () {
           for (var i = 0; i < hey.length; i++) {
             var Img = document.createElement("img");
             Img.setAttribute("src", hey[i].fruit);
             Img.setAttribute("class", "posterImage");

             var Div = document.createElement("div");
             Div.setAttribute("class", "posterDiv");
             Img.addEventListener("click", function() {
               if (this.parentNode.getElementsByTagName("input")[0].checked) {
                  this.className = "posterImage unselected";
                  this.parentNode.getElementsByTagName("input")[0].checked = false;
               } else {
                  this.className = "posterImage selected";
                  this.parentNode.getElementsByTagName("input")[0].checked = true;
               } 
             }); 
             Div.appendChild(Img);
             var newCheckbox = document.createElement("input");
             newCheckbox.setAttribute("type", "checkbox");
             Div.appendChild(newCheckbox);
             document.getElementById("idmain").appendChild(Div);
           }
         }
      </script>
    </body>
  </html>

如何将选定图像的链接从阵列存储到本地存储

0 个答案: