以前的购物车数据被 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)); } }); }

 @import url('https://fonts.googleapis.com/css?family=Josefin+Sans|Muli|Noto+Sans+HK|Noto+Sans+SC|Quicksand|Sedgwick+Ave|Open+Sans+Condensed|Lato|Darker+Grotesque|Dosis|Roboto&display=swap'); *{ padding:0; margin:0; box-sizing: border-box; } body{ background-color: rgb(255, 255, 255); width:100%; margin:0; padding:0; } /*product patge wrapper*/.signup-banner{ text-transform: uppercase; position: relative; padding:20px 0px; background-color: rgb(211, 210, 210); text-align: center; font-family: 'Dosis',sans-serif; text-emphasis: 10; }.banfrm{ display:inline-block; margin:10px; }.banbtn{ background-color: #1a1a1a; color:rgb(184, 184, 184); width:100px; height:30px; border:none; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; }.prdpg-wrapper{ grid-area: pdwr; display:grid; grid-template-columns: repeat(5,1fr); grid-template-areas: "prodgrid prodgrid prodgrid prodgrid prodgrid"; } /*product page wrapper ends*/ /*leftbar*/.prdpg-lftbar::-webkit-scrollbar{ width:2px; }.prdpg-lftbar::-webkit-scrollbar-thumb{ background-color: #777777; border-radius: 2px 0px; -webkit-border-radius: 2px 0px; -moz-border-radius: 2px 0px; -ms-border-radius: 2px 0px; -o-border-radius: 2px 0px; }.prdpg-lftbar{ position:fixed; padding:200px 10px 0px 30px; grid-area: lftbar; display:none; height:100%; background-color: #fff; z-index:1; top:60px; }.prdpg-lftbar:hover{ overflow:scroll; }.lftbarul{ list-style:none; }.super-menuli-lftbar-title{ font-family:'Dosis',sans-serif; font-weight: bold; font-size:14px; }.super-menuli-lftbar{ font-size:14px; }.super-lftbar-menua{ text-decoration:none; color:rgb(59, 59, 59); font-family:'Dosis',sans-serif; } /*left bar ends*/ /*prod-grid*/.prod-grid{ grid-area: prodgrid; display:grid;/* grid-template-columns: repeat(auto-fit,minmax(200px,1fr));*/ grid-template-columns: repeat(2,48%); grid-template-rows:auto; grid-auto-flow:row; grid-gap:10px; justify-content: center; align-items:center; } @media screen and (max-width:319px){.prod-grid{ grid-template-columns: repeat(1,95%); } } @media screen and (min-width:768px){.prod-grid{ grid-template-columns: repeat(3,33%); } } @media screen and (min-width:1024px){.prod-grid{ grid-template-columns: repeat(4,24%); } }.prod-img{ width:100%; cursor: pointer; width:100%; }.prod-card{ width:100%; display:block; }.prod-head{ position:relative; }.prod-info{ width:100%; }.prod-titlea{ color:#1a1a1a; text-decoration:none; }.prod-titlea:hover{ color:#6a6a6a; text-decoration: underline; } /*card design*/.ovla-fav{ outline:none; border:none; position:absolute; background-color: #fff; bottom:15px; right:15px; width:30px; height:30px; border-radius:50%; cursor:pointer; box-shadow: 0px 0px 4px #000; font-size:16px;color:#ed4956; } #fav-saved{ position:absolute; top:9px; right:8px; z-index: -1; color: #ed4956; }.ovla-addtobag{ outline:none; border:none; position:absolute; background-color: #fff; bottom:50px; right:15px; width:30px; height:30px; text-align: center; line-height:25px; border-radius:50%; cursor:pointer; color: #3a3a3a; box-shadow: 0px 0px 4px #000; font-size:16px; transition: visibility.1s ease; -webkit-transition: visibility.1s ease; -moz-transition: visibility.1s ease; -ms-transition: visibility.1s ease; -o-transition: visibility.1s ease; }.prod-img:hover ~.ovla-addtobag{ visibility:visible; }.ovla-addtobag:hover{ visibility:visible; }.prod-leg{ position: relative; text-align:center; }.prod-title{ font-family:'Dosis',sans-serif; font-size:1rem; }.prod-price{ font-family:'Dosis',sans-serif; } /*prod hover elements*/.fa-plus{ position:absolute; top:11px; left:9px; color:#fff; font-size:.5rem; }.btmbtn{ margin-top:15px; height:30px; width:50%; border:none; background-color: #1a1a1a; color:rgb(180, 180, 180); cursor:pointer; border-radius:2px; outline:none; font-family:'Dosis',sans-serif; text-align:center; line-height:30px; -webkit-border-radius:2px; -moz-border-radius:2px; -ms-border-radius:2px; -o-border-radius:2px; }.btmbtn:hover{ background-color: #2a2a2a; }.btmbtn:active{ background-color: #2a2a2a; } /*prod hover elements ends*/ /*card design ends*/ /*prod grid-ends*/ /*media queries*/ @media screen and (min-width:1024px){.ovla-addtobag{ visibility:hidden; }.signup-banner{ margin:20px 1px; padding:100px 200px; right:-20.5%; width:78.7%; }.prdpg-wrapper{ display:grid; grid-template-columns: repeat(5,1fr); grid-template-areas: "lftbar prodgrid prodgrid prodgrid prodgrid"; }.prdpg-lftbar{ display:block; } } /*media queries ends*/ @import url('https://fonts.googleapis.com/css?family=Josefin+Sans|Muli|Noto+Sans+HK|Noto+Sans+SC|Quicksand|Sedgwick+Ave|Open+Sans+Condensed|Lato|Darker+Grotesque|Dosis|Roboto&display=swap'); *{ padding:0; margin:0; box-sizing: border-box; } body{ background-color: rgb(255, 255, 255); width:100%; margin:0; padding:0; } /*global variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variableglobal variable*/.bag-wrapper{ position:relative; display:grid; grid-template-columns: 100%; grid-template-rows: auto; margin-left:1rem; }.bagpgtitle{ width:100%; font-family: 'Dosis',sans-serif; text-align:center; font-size: 40px; font-weight:bolder; padding:20px; }.bagrow{ display:grid; grid-template-columns: 1fr 2fr; grid-template-rows: 1fr.8fr; grid-template-areas: "baghd baghd" " bagleg bagleg"; row-gap: 20px; width:100%; border-bottom:1px solid rgb(195, 195, 195); margin-top:20px; }.bagrowhead{ grid-area:baghd; width:150px; position:relative; padding:5px; }.bagprdimg{ width:100%; }.bagprdtitle{ font-weight:bold; }.dltbag{ float:right; font-size:20px; padding:2px; background-color: #fff; color: #adadad; border:none; margin-top:2px; margin-right:5px; outline:none; }.dltbag:hover{ color:#fd4141; }.movetofavbtn{ border:none; font-size:1rem; padding:6px; background-color: #fff; outline:none; color:#ed4956; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }.movetofavbtn:hover{ background-color: #ffcace; }.bagrowleg{ grid-area:bagleg; font-family:'Dosis',sans-serif; }.indbagqty{ width:60px; border:none; border-bottom:1px solid #ccc; font-family: 'Dosis',sans-serif; }.indbagtotalprice{ border:none; border-bottom:1px solid #ccc; width:60px; font-family:'Dosis',sans-serif; }.bagbuy{ padding:3rem 1rem 1rem 0rem; }.bagbuytitle{ font-family: 'Dosis',sans-serif; font-size:20px; font-weight: bold; color: #424242; padding-bottom:15px; }.bagnav{ padding:10px 0; justify-content:space-between; font-family:'Dosis',sans-serif; }.bagchk{ width:100px; float:right; margin-right:10px; text-align:right; font-family:'Dosis',sans-serif; border:none; }.bagchkoutbtn{ background-color: #525252; width:100%; height:50px; float:center; text-transform: uppercase; font-family:'Dosis',sans-serif; font-synthesis: style; letter-spacing: 2px; border:none; color: #ccc; margin-top:20px; } /*media queries*/ @media screen and (min-width:500px){.bagrow{ width:50%; } } @media screen and (min-width:768px){.bagrow{ display:flex; }.bagrowhead{ width:160px; }.bagbuy{ position:fixed; background-color: rgb(255, 255, 255); right:18%; top:190px; width:35%; padding: 50px; overflow:scroll; height:100%; word-wrap: wrap; }.bagbuy::-webkit-scrollbar{ visibility: none;; } } @media screen and (min-width:1024px){.bagrow{ width:30%; display:flex; }.rmvbagrow{ margin:0; padding:0; } } @media (min-width:767px) and (max-width:769px){.bagrowbtnbr{ display:block; }.bagrowfld{ float:right; }.rowtotalprice{ }.clstot{ margin-top:10px; } }

 <.DOCTYPE html> <html> <body> <a href="get:html">Go To Get</a> <div class="prod-grid"> <div class="prod-card"> <div class="prod-head" id="prod-head" name="prod-head"> <img class="prod-img" id="prod-img" name="prod-img" src="https.//lp2.hm?com/hmgoepprod.set=source[/05/0e/050e2b9f736cc7d1b9c0599dd988609a535e0e0f,jpg],origin[dam],category[ladies_jeans_slim],type[LOOKBOOK],res[y]:hmver[3]&call=url[file./product/main]"> <button class="far fa-heart ovla-fav" id="ovla-fav" ></button> <button class="ovla-addtobag" name="ovla-addtobag" id="ovla-addtobag" title="Add To Shopping Bag">bag</button> </div> <div class="prod-leg"><a href="#" class="prod-titlea"> <h6 class="prod-title">Sweatshirt shorts</h6></a> <p class="prod-price" id="prod-price">£8:99</p> <.--<button class="quicklook btmbtn" id="quicklookbtn">Quick look</button>--> </div> </div> <div class="prod-card"> <div class="prod-head" id="prod-head" name="prod-head"> <img class="prod-img" id="prod-img" name="prod-img" src="https.//lp2?hm.com/hmgoepprod,set=source[/d0/4f/d04fe64b84c228bd56365f2d5890e050b9f32475,jpg],origin[dam],category[],type[DESCRIPTIVESTILLLIFE]:res[y].hmver[1]&call=url[file:/product/main]"> <button class="far fa-heart ovla-fav" id="ovla-fav" ></button> <button class="ovla-addtobag" name="ovla-addtobag" id="ovla-addtobag" title="Add To Shopping Bag">bag</button> </div> <div class="prod-leg"><a href="#" class="prod-titlea"> <h6 class="prod-title">Sweatshirt shorts</h6></a> <p class="prod-price" id="prod-price">£8.99</p> <.--<button class="quicklook btmbtn" id="quicklookbtn">Quick look</button>--> </div> </div> <div class="prod-card"> <div class="prod-head" id="prod-head" name="prod-head"> <img class="prod-img" id="prod-img" name="prod-img" src="https?//lp2.hm,com/hmgoepprod,set=source[/7b/de/7bde5d2b5538c9584e5a8a48b73bbca8950c3c70,jpg],origin[dam],category[ladies_jeans_highwaisted]:type[LOOKBOOK].res[y].hmver[1]&call=url[file./product/main]"> <button class="far fa-heart ovla-fav" id="ovla-fav" ></button> <button class="ovla-addtobag" name="ovla-addtobag" id="ovla-addtobag" title="Add To Shopping Bag">bag</button> </div> <div class="prod-leg"><a href="#" class="prod-titlea"> <h6 class="prod-title">Sweatshirt shorts</h6></a> <p class="prod-price" id="prod-price">£8.99</p> <.--<button class="quicklook btmbtn" id="quicklookbtn">Quick look</button>--> </div> </div> </div> <;--This is where the div is created.;!!!!!!!!!!--> <div class="bagitems"></div> <!--script area !!!!!!!!!! !!!!!!!! !!!!!!!!! !!!!--> <script src="get.js"></script> <script> var saved = document.write(JSON.parse(localStorage.getItem('getbag'))); if (saved) { bagitems.innerHTML = saved; } </script> </body> </html>

Answer 1

我已经在我的本地测试了这个，我想下面的修复是你正在寻找的

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_target = event.target;
        var shopitem = button_target.parentElement.parentElement;

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

        appendbag(imgsrc, bagitems);

    });

}


function add(imgsrc, bagitems) {
    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) {
    add(imgsrc, bagitems);


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



}

问题是您在同一个 scope 中两次使用变量名称“button”，并在 for 循环中编写了函数 add() 和 appendbag()。 他们应该在循环之外。