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

我有一个细枝视图，其中显示产品目录，我希望在用户单击“添加”按钮时能够将每个产品保存在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);
         });

});

---

先谢谢你

您正在为存储产品使用相同的密钥。您可以使用不同的密钥并对其进行维护

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

e、 g。 localStorage.setItem'products-1，JSON.stringifyproducts

localStorage.setItem'products-2，JSON.stringifyproducts； 等等

参考下面的代码

$document.readyfunction{ var prodId=$'.thumbnail'.attrid； $'按钮'。单击'按钮'，函数{ var乘积= { prodID:$'.thumbnail'.attrid， prodName:$'prodName'。文本， prodPrice:$'prodPrice'。文本， prodImage:$'prodImage'.attr'src'， prodLink:$'prodLink'.attr'href' }; localStorage.setItem'products-'+prodId， JSON.stringifyproducts； var retrievedObject=JSON.parselocalStorage.getItem'products-'+prodId； 日志'retrievedObject:'，retrievedObject； };

---

};谢谢你的快速回答，但这只解决了其中一个问题。该脚本仅获取每页上的第一个产品。如果我单击同一页面中的另一个产品，它只返回控制台中的第一个产品，并且存储不变。但现在我有了更多的值：。也许我的HTML部分有问题？我将关闭问题并将您的答案标记为正确。非常感谢。