如何将数组生成为 HTML

Question

所以，基本上我有一个带有图像的页面（每个都有类似的按钮），应该在单击按钮后显示在另一个页面上。

这就是我将图像（在单击按钮后）放入数组的方式：

$('button').click(e => {
    let likedImgs= JSON.parse(localStorage.getItem('cart') || '[]');
    let itemName = $(e.target).data('name');
    let item = $('img').filter(v => v.name === itemName);

    likedImgs.push(item);
    localStorage.setItem('likedImgs', JSON.stringify(likedImgs));

});

在我喜欢的照片的页面上：

 <template>
                        <div id="isOutput"></div>
                </template>

这就是我尝试将数组生成为 HTML 并将其显示为下一页上的图像的方式：

  var myArr = JSON.parse(localStorage.getItem('likedImgs'));
                function  showContent () {
                  var temp, item, a, i;
                  temp = document.getElementsByTagName("template")[0];
                  item = temp.content.querySelector("div");
                  for (i = 0; i < myArr.length; i++) {
                    a = document.importNode(item, true);
                    a.textContent += myArr[i];
                    document.body.appendChild(a);
                  }
                }

但这似乎不起作用。你能告诉我我做错了什么吗？

控制台返回对象数组，如下所示： 0: prevObject: 0: {} 1: {} 2: {} 3: {} 4: {} 5: {} 6: {} length: 7 prevObject: {0: {…}, length: 1} proto: Object proto: Object

Answer 1

stringify() 不能很好地处理 DOM 元素。

Related Stack Question: 如何 JSON.stringify 一个 dom 元素？

因此，我们需要从图像中提取我们想要的属性并将它们字符串化。

在此示例中，为简单起见，我使用隐藏输入来充当本地存储。

在按钮单击时，我们只解析隐藏字段，并在result 区域重新创建元素

let likedImgs = [];
let itemName = '1'; //$(e.target).data('name');
let item = $('#source > img').filter((i, v) => v.name !== itemName); //changed the filter for demonstration
//only 'stringify' the properties that matter to me
likedImgs = $.map(item, x => {
  return {
    src: $(x).attr("src"),
    name: $(x).attr("name")
  };
});
//store them somewhere for example instead of localStorage//
$("#tst").val(JSON.stringify(likedImgs)); //replace with storing in localStorage
//localStorage.setItem('likedImgs', JSON.stringify(likedImgs));
//console.log($("#tst").val()); //output for prosperity



//handle a button click just for fun
$("button#p").click(x => show($("#tst").val())); //you will need to read from localStorage instead
//$("button#p").click(x => show(localStorage.getItem('likedImgs')));//like this

//process a json string, this function to be on page 2
function show(txt) {
  var txt = JSON.parse(txt);
  //var txt = JSON.parse(txt);
  var tmplate = $("#result");
  tmplate.empty(); //clean out the results//
  $.each(txt, function(i, elem) {
    tmplate.append($("<img>")
      .attr("src", elem.src)
      .attr("name", elem.name));
  });
}

div#source>img {
  border: 2px solid red;
}

img {
  height: 100px;
}

div#result>img {
  border: 2px solid green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id='p'>Process</button>
<div id='source'>
  <img src='https://picsum.photos/200/300/?random' name="1" />
  <img src='https://picsum.photos/200/300/?random' name="2" />
  <img src='https://picsum.photos/200/300/?random' name="3" />
  <img src='https://picsum.photos/200/300/?random' name="4" />
  <img src='https://picsum.photos/200/300/?random' name="5" />
</div>
<input id='tst' type='hidden' />
<!-- placeholder for localStorage -->
<div id="result"></div>