Javascript localStorage 替换数据而不是将数据附加到现有数据

Question

我想用 localStorage 制作新的 div。它运行良好，除非我重新加载页面并再次单击袋子按钮，我之前制作的 div 被新的 div 替换。我希望它在先前添加的 div 之后添加新的 div。任何答案将不胜感激！非常感谢！

var addtobagbtn = document.getElementsByClassName('ovla-addtobag');

var tles = document.getElementsByClassName('prod-title');

for ( i = 0; i <addtobagbtn.length; i++) {

    var button = addtobagbtn[i];

    button.addEventListener('click', function() {

        var button = event.target;

        var shopitem = button.parentElement.parentElement;

        var bagitems = document.getElementsByClassName('bagitems')[0];

        var imgsrc = shopitem.getElementsByClassName('prod-img')[0].src;

        appendbag();

        

        

        

        

        function add(imgsrc) {

        bagitems.insertAdjacentHTML("afterbegin",`<div class="bagrow"><div class="bagrowhead"><img src="${imgsrc}" class="bagprdimg" name="bagprdimg"></div><div class="bagrowleg"><button title="Remove From Bag" class="fas fa-times dltbag"></button><div class="bagprdinfo"><p class="bagprdtitle" title="Product Name">Girlfriend Regular Jeans</p><p class="prdbrand" title="Brand Name">H&M</p><p class="bagprdprice" title="Price">$24.99</p><p class="prdcolor" title="Color">Dark denim blue</p><p class="bagprdsize" title="Size">12</p><p class="prdcode" title="Product Code">0706016003</p><br><button class="far fa-heart movetofavbtn" title="Move To Bag"></button><span class="bagrowbtnbr"><label>Qty: </label><input type="number" value="1" name="indbagqty"title="Select Quantity" class="indbagqty bagrowfld" id="indbagqty"></span><span class="bagrowbtnbr"><label>Total: </label><input type="text" title="Total Price" class="indbagtotalprice bagrowfld" name="indbagtotalprice" readonly></span></div></div></div>

    `)

}

function appendbag() {

    add(imgsrc);

    localStorage.setItem("getbag",JSON.stringify( bagitems.innerHTML));

    

}

    });

    

}

Answer 1

我已经在我的本地测试了这个，我想下面的修复是你正在寻找的var addtobagbtn = document.getElementsByClassName('ovla-addtobag');var tles = document.getElementsByClassName('prod-title');for (i = 0; i < addtobagbtn.length; i++) {&nbsp; &nbsp; var button = addtobagbtn[i];&nbsp; &nbsp; button.addEventListener('click', function() {&nbsp; &nbsp; &nbsp; &nbsp; var button_target = event.target;&nbsp; &nbsp; &nbsp; &nbsp; var shopitem = button_target.parentElement.parentElement;&nbsp; &nbsp; &nbsp; &nbsp; var bagitems = document.getElementsByClassName('bagitems')[0];&nbsp; &nbsp; &nbsp; &nbsp; var imgsrc = shopitem.getElementsByClassName('prod-img')[0].src;&nbsp; &nbsp; &nbsp; &nbsp; appendbag(imgsrc, bagitems);&nbsp; &nbsp; });}function add(imgsrc, bagitems) {&nbsp; &nbsp; bagitems.insertAdjacentHTML("afterbegin", `<div class="bagrow"><div class="bagrowhead"><img src="${imgsrc}" class="bagprdimg" name="bagprdimg"></div><div class="bagrowleg"><button title="Remove From Bag" class="fas fa-times dltbag"></button><div class="bagprdinfo"><p class="bagprdtitle" title="Product Name">Girlfriend Regular Jeans</p><p class="prdbrand" title="Brand Name">H&M</p><p class="bagprdprice" title="Price">$24.99</p><p class="prdcolor" title="Color">Dark denim blue</p><p class="bagprdsize" title="Size">12</p><p class="prdcode" title="Product Code">0706016003</p><br><button class="far fa-heart movetofavbtn" title="Move To Bag"></button><span class="bagrowbtnbr"><label>Qty: </label><input type="number" value="1" name="indbagqty"title="Select Quantity" class="indbagqty bagrowfld" id="indbagqty"></span><span class="bagrowbtnbr"><label>Total: </label><input type="text" title="Total Price" class="indbagtotalprice bagrowfld" name="indbagtotalprice" readonly></span></div></div></div>`);}function appendbag(imgsrc, bagitems) {&nbsp; &nbsp; add(imgsrc, bagitems);&nbsp; &nbsp; localStorage.setItem("getbag", JSON.stringify(bagitems.innerHTML));}问题是您在同一范围内两次使用变量名称“button”，并在 for 循环内编写了函数 add() 和 appendbag() 。他们应该在循环之外。