使用 jQuery 在本地存储上添加产品

Question

我有一个树枝视图，在其中显示产品目录，当用户单击添加按钮时，我希望能够将每个产品保存在 localStorage 上。现在我只能从一个页面中获得第一个产品。如果我更改页面并选择另一种产品，则第一个产品将被替换。产品最终将进入购物车，然后使用控制器路径从那里进入实体。现在我想让这部分工作。

HTML+Twig 代码：

<div id="parentDiv"  class="product row">
                {% for products in pagination %}

                    <div class="product col-sm-6 col-lg-6 col-md-6 hero-feature">

                      <div id="{{attribute(products ,'id')}}"  class="product thumbnail">

                        <img id="prodImage"  class="product img-responsive img-rounded" src="{{attribute(products ,'image')}}" style="width:150px;height:150px" >

                        <div class="caption">

                            <h4 id="prodPrice"  class="product pull-right"><b>{{ attribute (products, 'price') }}Lei</b></h4>

                            <h4 id="prodName" class="product"  style="height:100px;width:200px;">

                                <a id="prodLink" class="product"  
                                    href="{{ attribute (products, 'affiliatelink') }}" 
                                    target="_blank">{{attribute ( products, 'name') }}</br></a>

                            </h4>

                           </div>

                              <div class="add-to-cart" >

                                   <button class="btn btn-danger" type="button">Adauga</button>

                              </div>

                    </div>                         

                  </div>

                {% endfor %}
            </div>

还有 jQuery 代码：

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>                                            
    <script type='text/javascript'>
    $(document).ready(function() {     

               $('button').on('click', function(){


         var products =
                 {
                   prodID    :$('.thumbnail').attr("id"),
                   prodName  :$('#prodName').text(),
                   prodPrice :$('#prodPrice').text(),
                   prodImage :$('#prodImage').attr('src'),
                   prodLink  :$('#prodLink').attr('href')
                 };

                     localStorage.setItem('products', 

JSON.stringify(products));

var retrievedObject = JSON.parse(localStorage.getItem('products'));
console.log('retrievedObject: ', retrievedObject);
         });

});

提前谢谢你。

Answer 1

您使用相同的存储密钥（“产品”）。您可以使用不同的密钥并对其进行维护。

假设您的产品 ID 是唯一的，然后使用它。

例如
localStorage.setItem('products-1,JSON.stringify(products));

localStorage.setItem('products-2,JSON.stringify(products)); 等等

参考以下代码

 $(document).ready(function() {     
  var prodId = $('.thumbnail').attr("id");
               $('button').on('click', function(){


         var products =
                 {
                   prodID    :$('.thumbnail').attr("id"),
                   prodName  :$('#prodName').text(),
                   prodPrice :$('#prodPrice').text(),
                   prodImage :$('#prodImage').attr('src'),
                   prodLink  :$('#prodLink').attr('href')
                 };

                     localStorage.setItem('products-' + prodId, 

JSON.stringify(products));

var retrievedObject = JSON.parse(localStorage.getItem('products-' + prodId));
console.log('retrievedObject: ', retrievedObject);
         });

});