Question

我有一个购物篮，我希望用户能够点击一个按钮，将他们带到一个单独的页面，同时捕获他们的购物篮内容（项目名称，数量，价格等）。目前我正在使用localStorage将项目名称发送到我的新页面，但是唯一打印的项目是放在一个篮子里的最后一项（我不知道如何阻止localStorage覆盖数据，就像它一样）。

这是购物篮页面上的itemName部分。

<!--START: itemnamelink--><a id="itemName" href="product.asp?itemid=[ITEM_CATALOGID]">[ITEM_NAME]</a><!--END: itemnamelink-->

这是我在篮子页面上的一个脚本。

      jQuery( document ).ready(function($) {
    var itemName = document.getElementById('itemName');


       var arrayShop = [{name: itemName.textContent}];

if(localStorage.getItem("user") == null) { 
 localStorage.setItem("user",JSON.stringify([arrayShop]))
}
else{
  var newArray = JSON.parse(localStorage.getItem("user"));
  newArray.push(arrayShop);
  localStorage.setItem("user", JSON.stringify(newArray))
}


});

这是新页面上的脚本

 jQuery( document ).ready(function($) {

var hst = document.getElementById("add");

console.log(localStorage.getItem("user"));

var items = JSON.parse(localStorage.getItem("user"));

   for (var i = 0; i < items.length; i++) {
 hst.innerHTML += "<tr><td>" + items[i].name + "</td><td>"+ items[i].price + 

"</td></tr>";
}





});

 <!--HTML ON THE PAGE -->


    <table id="add">
    <tr><td>Name</td><td>Price</td></tr>
</table>

我得到以下输出，这是篮子里的最后一项（篮子里有4个项目）。

Name    
110mm Chair

我应该来。

Name
110mm Chair
Red Chair
Green Chair
Grey Chair

以下是我的购物车

 <div class="shoppingCartItems">
      <div class="titles2">
        <div class="item-info">[shoppingcart_items]</div>
        <div class="item-qty">[shoppingcart_quantity]</div>
        <div class="item-price">[shoppingcart_price]</div>
        <div class="item-total">[shoppingcart_total]</div>
        <div class="item-remove">&nbsp;</div>
        <div class="clear"></div>
      </div>
      <!--START: SHOPPING_CART_ITEM-->
      <div class="row">
        <div class="item-info">
          <div class="product-image"><!--START: itemthumbnail--><a href="product.asp?itemid=[ITEM_CATALOGID]"><img src="thumbnail.asp?file=[THUMBNAIL]" height="55" width="55" /></a><!--END: itemthumbnail--><!--START: thumbnailnolink--><img src="thumbnail.asp?file=[THUMBNAIL]" height="55" width="55" id="tnl" /><!--END: thumbnailnolink--></div>
          <div class="product-name-options"> 
            <!--START: itemnamelink--><a id="itemName" class ="itemName" href="product.asp?itemid=[ITEM_CATALOGID]">[ITEM_NAME]</a><!--END: itemnamelink--> 
            <!--START: itemnamenolink--><span id="spnItemName">[ITEM_NAME]</span><!--END: itemnamenolink--> 
            <!--START: itemoptions--> 
            <br />
            <a href='#' onclick="toggle('opt[ITEM_ID]')">View/Hide options</a><br />
            <div id=opt[ITEM_ID] name=opt[ITEM_ID] style="display:none;">[OPTIONS]</div>
            <!--END: itemoptions--> 
            <!--START: recurring_frequency-->
            <div class="recurring_frequency">This item will Autoship every <strong>[recurring_frequency]</strong></div>
            <!--END: recurring_frequency--> 
            <!--START: giftwraplink-->
            <div class="giftwraplink"> <a onclick="showGiftWrap('[ITEM_ID]')">[giftwrap_link]</a> </div>
            <!--END: giftwraplink--></div>
          <div class="clear"></div>
        </div>
        <div class="item-qty">
          <input type="text" name="qtyitemnum" value="[ITEM_QUANTITY]" size="3" maxlength="5" class="txtBoxStyle" />
          <input type="hidden" name="coliditemnum" value="[ITEM_ID]" size="3" maxlength="5" />
          <a href="#" onclick="document.forms['recalculate'].submit();return false;" class="update-qty">[shoppingcart_updatecart]</a>
        </div>
        <div class="item-price" id="itemPrice">[ITEM_PRICE] </div>
        <div class="item-total">[ITEM_SUBTOTAL]</div>
        <div class="item-remove"><a href="#" onclick="document.recalculate.qtyitemnum.value=0;document.recalculate.submit();"><i class="icon-cancel"></i></a></div>
        <div class="clear"></div>
      </div>
      <!--END: SHOPPING_CART_ITEM-->
      <div class="shoppingCartTotal">
        <div class="clear">&nbsp;</div>
        <div class="item-total">[CARTSUBTOTAL]</div>
        <div class="item-price">[shoppingcart_subtotal]</div>
        <div class="clear"></div>
        <!--START: DISCOUNTS-->
        <div class="clear">&nbsp;</div>
        <div class="item-total">[DISCOUNTS]</div>
        <div class="item-price">[checkout1_discounts]</div>
        <div class="clear"></div>
        <!--END: DISCOUNTS-->
        <div class="clear">&nbsp;</div>
        <div class="item-total"><strong>[CARTTOTAL]</strong></div>
        <div class="item-price"><strong>[shoppingcart_total]</strong></div>
        <div class="clear"></div>
      </div>
    </div>

Answer 1

我不知道你的购物车是怎么做的。但使用下面的代码作为参考，你可以解决你的问题。

var uname = document.getElementById('uname1').value;

function checkFname(){
    var fname = document.forms["form"]["fname"].value;
    var chk_fname = fname.replace(/^[a-zA-z]{2,15}$/, '');
    if (fname != chk_fname) {
        document.getElementById("fname").className = '';
        return true;
    } 
    else if (fname == chk_fname) {
        document.getElementById("fname").className = 'error';
        return false;
    }
}


function Register(){
    var uname = document.getElementById('uname').value;
    var user = {
        'fname':document.getElementById('fname').value,
        };
    localStorage.setItem(uname,JSON.stringify(user));
}
function Validate(){
    Register();
}

将数据插入本地存储Register()函数时，username为密钥，user可以是包含数据的数组。

Answer 2

这是因为你要覆盖，而不是添加。在您的代码中，您需要使用上一条记录将元素附加到存储中，然后添加新记录，如下所示：

var arrayShop = {name: 'Chair 2'};
if(localStorage.getItem("user") == null) { 
 localStorage.setItem("user",JSON.stringify([arrayShop]))
}
else{
  var newArray = JSON.parse(localStorage.getItem("user"));
  newArray.push(arrayShop);
  localStorage.setItem("user", JSON.stringify(newArray))
}

在这个例子中，我的主席1＆＃39;是你要添加的新元素，所以如果你执行它两次，它会添加一个新元素，这是在arrayShop中传递的。

使用localStorage在不同页面之间传递数据

2 个答案: