基于localstorage用jquery改变元素的输入值答案

【问题标题】：change input value of element with jquery based on localstorage基于localstorage用jquery改变元素的输入值
【发布时间】：2021-04-26 20:24:15
【问题描述】：

我使用 php 为基于数据库的购物车创建一些 html 产品元素。

问题是，如果我更改了产品数量并刷新了我的页面，那么数量会变回 '1' 。所以我使用 localStorage 来存储每个产品的数量。如果我刷新，数量将成功保持不变，但如果我单击“+”图像元素添加数量，则只有在刷新页面时才会显示产品数量变化的输入值。所以问题是如何更新我的代码以动态添加产品数量并将数量同时保存到本地存储。

我的代码：

cart.php

<div class="cart__table table-responsive">
                      <table width="100%" class="table" id  ="cartItems">
                          <thead>
                            <tr>
                              <th>PRODUCT</th>
                              <th>NAME</th>
                              <th>UNIT PRICE</th>
                              <th>QUANTITY</th>
                              <th>TOTAL</th>
                            </tr>
                          </thead>
                          <tbody>
                            <?php 
                              if(isset($_COOKIE)){
                                $count = 0;
                                foreach($_COOKIE as $i){
                                  $count++;
                                  if($count ==1 ){
                                    continue;
                                  }
                                  $product = json_decode($i,true);
                                  echo "
                                  <tr 
                                    class ='product-columns'>
                                      <td class ='product__thumbnail'>
                                        <img src = ".$product["image"]." />
                                      </td>
                                      <td class='product__name'>
                                        <h3> ".$product["called"]." </h3>
                                        <small class = 'cartItemID' style = 'display:none;'> ".$product["code"]." </small>
                                        <small>".$product["soldAt"]."</small>
                                      </td>
                                      <td class='product__price'>
                                        <div class='price'>
                                          <span class='new__price'>".$product["costs"]."</span>
                                        </div>
                                      </td>
                                      <td class='product__quantity'>
                                        <div class='input-counter'>
                                            <div>
                                                <span class='minus-btn'>
                                                    <svg>
                                                        <use xlink:href='../images/sprite.svg#icon-minus'></use>
                                                    </svg>
                                                </span>
                                            <!--this is the element i want to change  -->
                                                <input 
                                                  type='text'  min='1' 
                                                   max='10' 
                                                  class='counter-btn' disabled
                                                  name = ".$product["code"]."
                                                   
                                                />
                                                <span class='plus-btn' >
                                                    <svg>
                                                        <use xlink:href='../images/sprite.svg#icon-plus'></use>
                                                    </svg>
                                                </span>
                                            </div>
                                        </div>
                                      </td>
                                      <td class='product__subtotal'>
                                          <div class='price'>
                                              <span class='new__price'>$250.99</span>
                                          </div>
                                          <a class='remove__cart-item'>
                                              <svg>
                                                <use xlink:href='../images/sprite.svg#icon-trash'></use>
                                              </svg>
                                          </a>
                                      </td>
                                  </tr>
                                  ";
                                  
                                }
                               <!-- when the php loads set input values to localstorage values -->  
                                echo "
                                  <script type = 'text/javascript'>
                                    var quantities = document.querySelectorAll('.counter-btn'); 
                                     quantities.forEach(q=>q.value = getSavedValue(q.name));
                                  </script>
                                ";

                              }else{
                                echo "<h1> No products have been added.  </h1>";
                              }


                            ?>
                                
                          </tbody>
                        </table>
                      </div>

因此，通过上面的代码，我使用 php 创建了 html 元素，并将它们的数量输入设置为相应元素的 localstorage 值

在 jquery 脚本中，当您单击“+”并更新本地存储时，我具有添加数量的功能

jquery.js

    //Save the value function - save it to localStorage as (ID, VALUE)
function saveValue(e){
  var name = e.name;  // get the sender's id to save it . 
  var val = e.value; // get the value. 
  localStorage.setItem(name, val);// Every time user writing something, the localStorage's value will override . 
}

//get the saved value function - return the value of "v" from localStorage. 
function getSavedValue  (v){
  if (!localStorage.getItem(v)) {
      return "1";// You can change this to your defualt value. 
  }
  return localStorage.getItem(v);
}

function changeValue(name,val){
  localStorage.setItem(name , val);
}


//document ready 
$(".plus-btn").click((e)=>{
    var itmQuantity = parseInt($(e.target).closest('tr').find('.counter-btn').val());
    console.log(itmQuantity); //number
    if(itmQuantity!=10){
      $(e.target).closest('tr').find('.counter-btn').attr('value' , itmQuantity+1);
      var cd =  $(e.target).closest('tr').find('.counter-btn').attr('name');
      changeValue(cd,itmQuantity+1);
    }
  });

【问题讨论】：

标签： javascript php html jquery

【解决方案1】：

尝试将此代码放在您的一个函数中，可能在“changeValue()”中

$('.counter-btn').attr('value', 999);

如果你将它放在 changeValue() 中，实际代码将是

$('.counter-btn').attr('value', val);

最好为 .counter-btn 的输入提供一个实际的 'id' 属性那么你可以更具体地使用

<input id="counter-btn-1" type='text'min='1' max='10' class='counter-btn' disabled name=".$product["code"]."/>

$('#counter-btn-1').attr('value', val);

【讨论】：

【解决方案2】：

你也可以从 php session 中解决这个问题

connection.php

if (!session_id()) {
    session_start();
}

index.php

<?php
    require 'connection.php';
?>
<div>
    <span class="plus-btn">+</span>
    <?php if (isset($_SESSION['count_val'])){ ?>
        <input type="text" name="" class="counter-btn" value="<?php echo $_SESSION['count_val']?>">
    <?php }else{ ?>
        
        <input type="text" name="" class="counter-btn" value=""> //Here's php loop value
    <?php }?>   
    <span class="minus-btn">-</span>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $('.minus-btn,.plus-btn').click(function(){
            var val = $('.counter-btn').val();
            $.ajax({
                url: 'ajax.php',
                type: 'POST',
                data: {val:val},
                success:function(){
                    alert('Data has been entered in session');
                }
            })
        })
    })
</script>

ajax.php

require 'connection.php';
$val = $_POST['val'];
$_SESSION['count_val'] = $val;

【讨论】：