如何在vanillaJS中使用localStorage

Question

我有2个用于洗衣服务网站的html页面，并且有一个javascript文件。 第一个html页面称为预订页面，用户可以在其中预订要洗涤的衣服数量，并自动计算要支付的总金额。 现在，在第二个html页面（即摘要页面）上，我希望预订页面上的相同金额能够反映在摘要页面上，该页面显示了总额，并且还希望在摘要页面中添加到其中的按钮（加号和减号按钮）。

我尝试将localStorage用于此项目，但无法弄清楚。

         Skirt(s)</p>
                  <div>
                      <p>
                        <button type="button" class="sub" data- 
       target="skirts">−</button>
                        <input type="text" value="0" 
        class="field_skirts" />
                        <button type="button" class="add" data- 
      target="skirts">+</button>
                        <p class="display_skirts" name="price" 
       max="3" min="1">&#8358; 0</p>
                    </p>
                </div>
          </div>

          <div>
              <div class="second-booking-container-image"><img 
          src="./img/blouse.png" /></div>
              <p class="second-booking-container-icon" 
         name="product" value="100" id="qnty_4">
                  Blouse(s)</p>
                  <div>
                        <p>
                        <button type="button" class="sub" data- 
         target="blouses">-</button>
                        <input type="text" value="0" 
           class="field_blouses" />
                        <button type="button" class="add" data- 
         target="blouses">+</button>

                        <p class="display_blouses" name="price" 
         max="3" min="1">&#8358; 0</p>
                        </p>
                  </div>
          </div>

          <div>
              <div class="second-booking-container-image"><img 
        src="./img/jacket.png" /></div>
              <p class="second-booking-container-icon-long" 
        name="product" value="100" id="qnty_5">Suit/Jacket(s)
              </p>
              <p>
                    <button type="button" class="sub" data- 
         target="suits">-</button>
                    <input type="text" value="0" class="field_suits" 
         />
                    <button type="button" class="add" data- 
               target="suits">+</button>

                  <p class="display_suits" name="price" max="3" 
       min="1">&#8358; 0</p>
             </p>
          </div>
       </div>

       <div class="third-booking-container">
          <p>Total:&#8358; <span id="totalValue"></span></p>
          <button>Set pick up date
          <FontAwesomeIcon class="second-container-button-right" 
      icon="angle-right" /></button>
        </div>
      </div>











       var subElm = document.querySelectorAll('.sub');
        var addElm = document.querySelectorAll('.add');
          var totalValueElm = document.getElementById('totalValue');

     for (var i = 0; i < subElm.length; i++) {
          subElm[i].addEventListener('click', function () {
    var targetItem = this.getAttribute('data-target');
    var inputElm = document.querySelector('.field_' + targetItem);
    var displayElm = document.querySelector('.display_' + 
        targetItem);
    var currentValue = +inputElm.getAttribute('value');

    if (currentValue !== 0) {
        var incValue = currentValue - 1;
        var strValue = ' ' + incValue;
        inputElm.setAttribute('value', incValue);
        // displayElm.innerHTML = "&#8358;" + strValue;
      displayElm.innerHTML = "&#8358; " + incValue * 100;
        totalValueElm.innerText = Number(totalValueElm.innerText) - 
        100;
    }
    });

    addElm[i].addEventListener('click', function () {
    var targetItem = this.getAttribute('data-target');
    var inputElm = document.querySelector('.field_' + targetItem);
    var displayElm = document.querySelector('.display_' + 
        targetItem);
    var currentValue = +inputElm.getAttribute('value');
    var incValue = currentValue + 1;
    var strValue = ' ' + incValue;
    inputElm.setAttribute('value', incValue);
    // displayElm.innerHTML = "&#8358;" + strValue;
    displayElm.innerHTML = "&#8358; " + incValue * 100;
    totalValueElm.innerText = Number(totalValueElm.innerText) + 100;
    });
    }






       <div class="summaryContainer">
        <div class="summaryNavBar"><p 
      className="summaryTitle">Summary</p></div>
        <div class="summaryContent">
        <p class="total" id="total">Total:</p>
       <p class="sum">&#8358;0.00</p>
        </div>

       <div class="summaryCard">
       <div class="summary-card-title">
           <div>Item</div>
          <div>Quantity</div>
       </div>
       <div class="summary-card-content">
           <div >Shirt(s)</div><div  id="
       first" class="summary-quantity"><button type="button" 
          id="sub" class="sub">−</button>
      <input type="text" id="1" value="0" class="field" />
          <button type="button" id="add" class="add">+</button>   
     </div>
           </div>
       <div class="summary-card-content">

       <div>Trouser(s)</div>
   <div class="summary-quantity" id="second">
     <button type="button" id="sub" class="sub">−</button>
   <input type="text" id="1" value="0" class="field" />
          <button type="button" id="add" class="add">+</button>          
         </div>
       </div>
       <div class="summary-card-content" id="third">

当我自动单击摘要页面时，我希望预订页面上的总价格计算也显示在摘要页面中

Answer 1

在预订页面中，使用localStorage.setItem（）将总价存储在本地存储中。

localStorage.setItem('totalPrice', JSON.stringify(totalValue));

在摘要页面中，使用localStorage.getItem（）访问此总价。

var totalPrice = JSON.parse(localStorage.getItem('totalPrice'));

请注意，所有值都存储为字符串，因此您必须使用JSON.parse()将字符串转换回对象或值。