如何将数据从一个html页面传递到另一个？

Question

These are two html page for a laundry website, one is called the booking page where clients can click to book the number of clothes to be washed and have the total amount to pay, another page called the summary which is suppose to receive data from booking page (no server side language is used, just local storage in JavaScript), but I have not been able to figure it out at all.

I tried using local storage but could not figure it out.

<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">
   <div>Suit(s)</div><div 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>

   <p class=" more">..more</p>
   </div>
   <div class="summaryButton">
    <button class="button-left"><span><FontAwesomeIcon 
  class="buttonLeft" icon="angle-left"/></span>Back</button>
  <button class="button-right">Proceed to payment<FontAwesomeIcon 
  class="buttonRight" icon="angle-right"/></button>

    </div>
  </div>
 </body>
</html>

This is the Booking page file

  <div class="bookingContainer">
  <div>
      <div class="booking-container-title">
          <p>Book a laundry service</p>
      </div>
  </div>

  <div class="first-booking-container">
      <p>What would you like to do ?</p>
      <select>
          <option class="middle">Dry Clean</option>
          <option class="middle">Wash</option>
          <option class="middle">Iron</option>
      </select>
      <FontAwesomeIcon class="select-icon" icon="chevron-down" />
  </div>



  <!-- First Value -->
  <div class="second-booking-container">
      <div>
          <div class="second-booking-container-image"><img 
    src="./img/shirt.png" /></div>
          <p class="second-booking-container-icon" name="product" 
        value="100" id="qnty_1">
              Shirt(s)</p>
          <select onchange='totalItem()' class="center" id="first">
              <option>0</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
          </select>
          <FontAwesomeIcon class="select-long-icon" icon="chevron- 
            down" />
          <p class="second-booking-container-text" id='firstVal' 
         name="price" max="3" min="1">&#8358;100</p>
         </div>

      <div>
          <div class="second-booking-container-image"><img 
         src="./img/trouser.png" /></div>
          <p class="second-booking-container-icon" name="product" 
         value="100" id="qnty_2">
              Trouser(s)</p>
          <select onchange='totalItem()' class="center" id="second">
              <option>0</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
          </select>
          <FontAwesomeIcon class="select-long-icon" icon="chevron- 
         down" />
          <p class="second-booking-container-text" id="secondVal" 
          name="price" max="3" min="1">&#8358;100</p>
         </div>

      <div>
          <div class="second-booking-container-image"><img 
        src="./img/skirt.png" /></div>
          <p class="second-booking-container-icon" name="product" 
           value="100" id="qnty_3">
              Skirt(s)</p>
          <select onchange='totalItem()' class="center" id="third">
              <option>0</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
          </select>
          <FontAwesomeIcon class="select-long-icon" icon="chevron- 
     down" />
          <p class="second-booking-container-text" id="thirdVal" 
         name="price" max="3" min="1">&#8358;100</p>
      </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>
          <select onchange='totalItem()' class="center" id="fourth">
              <option>0</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
          </select>
          <FontAwesomeIcon class="select-long-icon" icon="chevron- 
           down" />
          <p class="second-booking-container-text" id="fourthVal" 
            name="price" max="3" min="1">&#8358;100</p>
      </div>

      <div>
               src="./img/jacket.png" /></div>
          <p class="second-booking-container-icon-long" name="product" 
             value="100" id="qnty_5">Suit/Jacket(s)
          </p>
          <select onchange='totalItem()' class="center" id="fifth">
              <option>0</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
          </select>
          <FontAwesomeIcon class="select-long-icon" icon="chevron- 
            down" />
          <p class="second-booking-container-text" id="fifthVal" 
          name="price" max="3" min="1">&#8358;100</p>
            </div>
          </div>

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


  <script src="main.js"></script>

Here is the javascript file

  let first = document.querySelector('#first');
  let second = document.querySelector('#second');
  let third = document.querySelector('#third');
  let fourth = document.querySelector('#fourth');
  let fifth = document.querySelector('#fifth');

  //invoke this function when the input changes on individual 
  selected elements
  const totalItem = () => {
   let firstValue = `${first.options[first.selectedIndex].value}`
   let secondValue = `${second.options[second.selectedIndex].value}`
   let thirdValue =
    `${third.options[third.selectedIndex].value}`
   let fourthValue = `${fourth.options[fourth.selectedIndex].value}`
   let fifthValue = `${fifth.options[fifth.selectedIndex].value}`
   console.table(firstValue, secondValue, thirdValue, fourthValue,
    fifthValue)

   //call function for each cloths and pass 3 values(the selected 
   number, the constant(₦100) and where to update)
  multiplySelectedwithConstVal(firstValue, firstValNo, firstVal);
  multiplySelectedwithConstVal(secondValue, secondValNo,
   secondVal);
  multiplySelectedwithConstVal(thirdValue, thirdValNo, thirdVal);
  multiplySelectedwithConstVal(fourthValue, fourthValNo,
   fourthVal);
  multiplySelectedwithConstVal(fifthValue, fifthValNo, fifthVal);

  //total addition of all values
  let selectedValArray = [];

  const total = () => {
   selectedValArray.push(
    parseInt(firstVal.innerHTML.replace("₦", "")),
    parseInt(secondVal.innerHTML.replace("₦", "")),
    parseInt(thirdVal.innerHTML.replace("₦", "")),
    parseInt(fourthVal.innerHTML.replace("₦", "")),
    parseInt(fifthVal.innerHTML.replace("₦", ""))
   );
   return selectedValArray.reduce((accu, currentVal) => accu +
    currentVal, 0);
  }
  finalVal.innerHTML = `Total: <span>&#8358;${total()}</span>`
  // console.log(total());

  }

  //target elements that will be updated and
  let firstVal = document.querySelector('#firstVal');
  let secondVal = document.querySelector('#secondVal');
  let thirdVal = document.querySelector('#thirdVal');
  let fourthVal = document.querySelector('#fourthVal');
  let fifthVal = document.querySelector('#fifthVal');
  let finalVal = document.querySelector('#total');

  //convert ₦100 to number for multiplication
  //converted the innerhtml to number
  let firstValNo = parseInt(firstVal.innerHTML.replace("₦", ""));
  let secondValNo = parseInt(secondVal.innerHTML.replace("₦", ""));
  let thirdValNo = parseInt(thirdVal.innerHTML.replace("₦", ""));
  let fourthValNo = parseInt(fourthVal.innerHTML.replace("₦", ""));
  let fifthValNo = parseInt(fifthVal.innerHTML.replace("₦", ""));


  //multiply selected value with constant and update
  const multiplySelectedwithConstVal = (i, k, update) => {
   let result = parseInt(i) * k
   return update.innerHTML = `₦${result}`
  }

I want the value gotten from booking page be effected directly into the summary, the plus and minus button should also be able to add or remove the number of clothes and also change the total amount to be paid.

Answer 1

Add This code in your Initial Page ie Page 1

let firstVal = document.querySelector('#firstVal');
let secondVal = document.querySelector('#secondVal');
let thirdVal = document.querySelector('#thirdVal');
let fourthVal = document.querySelector('#fourthVal');
let fifthVal = document.querySelector('#fifthVal');
let finalVal = document.querySelector('#total');


localStorage.setItem("firstVal", firstVal);
localStorage.setItem("secondVal", secondVal);
localStorage.setItem("thirdVal", thirdVal);
localStorage.setItem("fourthVal", fourthVal);
localStorage.setItem("fifthVal", fifthVal);
localStorage.setItem("finalVal", finalVal);

Add This code in your Second Page where you want to fetch value ie Page 2

let firstVal = localStorage.getItem(('firstVal');
let secondVal = localStorage.getItem(('secondVal');
let thirdVal = localStorage.getItem(('thirdVal');
let fourthVal = localStorage.getItem(('fourthVal');
let fifthVal = localStorage.getItem(('fifthVal');
let finalVal = localStorage.getItem(('finalVal');

console.log(firstVal);
console.log(secondVal);
console.log(thirdVal);
console.log(fourthVal);
console.log(fifthVal);
console.log(finalVal);

you can also learn some basic related to local storage here: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Here is code for Booking Page where localstorage is used to store the count and item value:

 <div class="bookingContainer"> <div> <div class="booking-container-title"> <p>Book a laundry service</p> </div> </div> <div class="first-booking-container"> <p>What would you like to do ?</p> <select> <option class="middle">Dry Clean</option> <option class="middle">Wash</option> <option class="middle">Iron</option> </select> <FontAwesomeIcon class="select-icon" icon="chevron-down" /> </div> <!-- First Value --> <div class="second-booking-container"> <div> <div class="second-booking-container-image"><img src="./img/shirt.png" /></div> <p class="second-booking-container-icon" name="product" value="100" id="qnty_1"> Shirt(s) </p> <select onchange='totalItem()' class="center" id="first"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> </select> <FontAwesomeIcon class="select-long-icon" icon="chevron- down" /> <p class="second-booking-container-text" id='firstVal' name="price" max="3" min="1">&#8358;100</p> </div> <div> <div class="second-booking-container-image"><img src="./img/trouser.png" /></div> <p class="second-booking-container-icon" name="product" value="100" id="qnty_2"> Trouser(s) </p> <select onchange='totalItem()' class="center" id="second"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> </select> <FontAwesomeIcon class="select-long-icon" icon="chevron- down" /> <p class="second-booking-container-text" id="secondVal" name="price" max="3" min="1">&#8358;100</p> </div> <div> <div class="second-booking-container-image"><img src="./img/skirt.png" /></div> <p class="second-booking-container-icon" name="product" value="100" id="qnty_3"> Skirt(s) </p> <select onchange='totalItem()' class="center" id="third"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> </select> <FontAwesomeIcon class="select-long-icon" icon="chevron- down" /> <p class="second-booking-container-text" id="thirdVal" name="price" max="3" min="1">&#8358;100</p> </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> <select onchange='totalItem()' class="center" id="fourth"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> </select> <FontAwesomeIcon class="select-long-icon" icon="chevron- down" /> <p class="second-booking-container-text" id="fourthVal" name="price" max="3" min="1">&#8358;100</p> </div> <div> src="./img/jacket.png" /> </div> <p class="second-booking-container-icon-long" name="product" value="100" id="qnty_5">Suit/Jacket(s) </p> <select onchange='totalItem()' class="center" id="fifth"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> </select> <FontAwesomeIcon class="select-long-icon" icon="chevron- down" /> <p class="second-booking-container-text" id="fifthVal" name="price" max="3" min="1">&#8358;100</p> </div> </div> <div class="third-booking-container"> <p id="total">Total: <span>&#8358;0.00</span></p> <button> Set pick up date <FontAwesomeIcon class="second-container-button-right" icon="angle-right" /> </button> </div> </div> <script> let first = document.querySelector('#first'); let second = document.querySelector('#second'); let third = document.querySelector('#third'); let fourth = document.querySelector('#fourth'); let fifth = document.querySelector('#fifth'); //invoke this function when the input changes on individual // selected elements const totalItem = () => { let firstValue = `${first.options[first.selectedIndex].value}` let secondValue = `${second.options[second.selectedIndex].value}` let thirdValue = `${third.options[third.selectedIndex].value}` let fourthValue = `${fourth.options[fourth.selectedIndex].value}` let fifthValue = `${fifth.options[fifth.selectedIndex].value}` console.table(firstValue, secondValue, thirdValue, fourthValue, fifthValue) //call function for each cloths and pass 3 values(the selected // number, the constant(₦100) and where to update) multiplySelectedwithConstVal(firstValue, firstValNo, firstVal); multiplySelectedwithConstVal(secondValue, secondValNo, secondVal); multiplySelectedwithConstVal(thirdValue, thirdValNo, thirdVal); multiplySelectedwithConstVal(fourthValue, fourthValNo, fourthVal); multiplySelectedwithConstVal(fifthValue, fifthValNo, fifthVal); //total addition of all values let selectedValArray = []; const total = () => { selectedValArray.push( parseInt(firstVal.innerHTML.replace("₦", "")), parseInt(secondVal.innerHTML.replace("₦", "")), parseInt(thirdVal.innerHTML.replace("₦", "")), parseInt(fourthVal.innerHTML.replace("₦", "")), parseInt(fifthVal.innerHTML.replace("₦", "")) ); return selectedValArray.reduce((accu, currentVal) => accu + currentVal, 0); } var totalval = total(); finalVal.innerHTML = `Total: <span>&#8358;${totalval}</span>`; localStorage.clear(); localStorage.setItem("firstVal",firstValNo); localStorage.setItem("secondVal", secondValNo); localStorage.setItem("thirdVal", thirdValNo); localStorage.setItem("fourthVal", fourthValNo); localStorage.setItem("fifthVal", fifthValNo); localStorage.setItem("firstValCount", firstValue); localStorage.setItem("secondValCount", secondValue); localStorage.setItem("thirdValCount", thirdValue); localStorage.setItem("fourthValCount", fourthValue); localStorage.setItem("fifthValCount", fifthValue); localStorage.setItem("finalVal", totalval); } //target elements that will be updated and let firstVal = document.querySelector('#firstVal'); let secondVal = document.querySelector('#secondVal'); let thirdVal = document.querySelector('#thirdVal'); let fourthVal = document.querySelector('#fourthVal'); let fifthVal = document.querySelector('#fifthVal'); let finalVal = document.querySelector('#total'); //convert ₦100 to number for multiplication //converted the innerhtml to number let firstValNo = parseInt(firstVal.innerHTML.replace("₦", "")); let secondValNo = parseInt(secondVal.innerHTML.replace("₦", "")); let thirdValNo = parseInt(thirdVal.innerHTML.replace("₦", "")); let fourthValNo = parseInt(fourthVal.innerHTML.replace("₦", "")); let fifthValNo = parseInt(fifthVal.innerHTML.replace("₦", "")); //multiply selected value with constant and update const multiplySelectedwithConstVal = (i, k, update) => { let result = parseInt(i) * k return update.innerHTML = `₦${result}` } </script> 

Here is code for Summary page with add/ substract logic

 <div class="summaryContainer"> <div class="summaryNavBar"><p className="summaryTitle">Summary</p> </div> <div class="summaryContent"> <p class="total" id="total">Total:</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="firstVal" 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="secondVal" value="0" class="field" /> <button type="button" id="add" class="add">+</button> </div> </div> <div class="summary-card-content" id="third"> <div>Suit(s)</div><div class="summary-quantity"><button type="button" id="sub" class="sub">−</button> <input type="text" id="thirdVal" value="0" class="field" /> <button type="button" id="add" class="add">+</button> </div> </div> <p class=" more">..more</p> </div> <div class="summaryButton"> <button class="button-left"><span><FontAwesomeIcon class="buttonLeft" icon="angle-left"/></span>Back</button> <button class="button-right">Proceed to payment<FontAwesomeIcon class="buttonRight" icon="angle-right"/></button> </div> </div> </body> </html> <script> var firstValue = localStorage.getItem('firstVal'); var secondValue = localStorage.getItem('secondVal'); var thirdValue = localStorage.getItem('thirdVal'); var finalValue = localStorage.getItem('finalVal'); var firstValueCount = localStorage.getItem('firstValCount'); var secondValueCount = localStorage.getItem('secondValCount'); var thirdValueCount = localStorage.getItem('thirdValCount'); var finalVal = document.querySelector('#total'); finalVal.innerHTML = `Total: <span>&#8358;${finalValue}</span>`; document.getElementById('firstVal').value = firstValueCount ; document.getElementById('secondVal').value = secondValueCount ; document.getElementById('thirdVal').value = thirdValueCount ; var first = document.querySelector('#first'); var second = document.querySelector('#second'); var third = document.querySelector('#third'); var fourth = document.querySelector('#fourth'); var fifth = document.querySelector('#fifth'); //invoke this function when the input changes on individual // selected elements function calSum(el ,type){ if(type == "add"){ var id = (el.previousSibling.previousElementSibling.id); var count = parseInt(el.previousSibling.previousElementSibling.value); // increment count by one var final_count = (count + 1); el.previousSibling.previousElementSibling.value = final_count; }else{ var id = (el.nextSibling.nextElementSibling.id); var count = parseInt(el.nextSibling.nextElementSibling.value); // decrement count by one var final_count = (count - 1); el.nextSibling.nextElementSibling.value = final_count; } var totalSum = parseInt(localStorage.getItem('finalVal')); var price = 100; if(id === 'firstVal'){ totalSum = (totalSum + (price * final_count)) -(count *price) ; localStorage.setItem("firstValCount", final_count); }else if(id === 'secondVal'){ totalSum = (totalSum + (price * final_count)) -(count *price); localStorage.setItem("secondValCount", final_count); }else if(id === 'thirdVal'){ totalSum = (totalSum + (price * final_count)) -(count *price) ; localStorage.setItem("thirdValCount", final_count); } console.log(totalSum); localStorage.setItem("finalVal", totalSum); document.querySelector('#total').innerHTML = `Total: <span>&#8358;${totalSum}</span>`; } var classname = document.getElementsByClassName("add"); for (var i = 0; i < classname.length; i++) { classname[i].addEventListener('click', function(){ calSum(this,'add'); } , false); } var sub = document.getElementsByClassName("sub"); for (var i = 0; i < sub.length; i++) { sub[i].addEventListener('click', function(){ calSum(this,'sub'); } , false); } </script>