使用localStorage在不同頁面之間傳遞數據

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”是要添加的新元素，因此，如果兩次執行它，它將添加一個新元素，該元素是arrayShop中傳遞的。