Question

我有一个twig视图，我在其中显示产品目录，我希望能够在用户单击ADD按钮时将每个产品保存在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

您使用相同的存储密钥（＆＃34;产品＆＃34;）。您可以使用不同的密钥并进行维护。

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

e.g。
localStorage.setItem（＆＃39;产品-1，JSON.stringify（产品））;

localStorage.setItem（＆＃39;产品-2，JSON.stringify（产品））; 等等

参考下面的代码

＆＃13;

 $(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);
         });

});

＆＃13;

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

1 个答案: