GetItem with sessionStorage Cart

Question

Stack Overflow world! I have used information from slack time and time again and have always been pretty good at finding answers to my questions. I've been stumped on this one, I'm not a huge Javascript person I know enough to get by and been trying to do more and more as I can. I'm trying to create a very minimalistic shopping card for a client. I have attached a photo it's not 100% done being styled.

I'm using sessionStorage and have been able to write the code so I can click on each color and quantity and get it to store the data using the setItem function, but what I'm also wanting to do is be able to simultaneously getItem and post it to a cart.html I'm really trying to keep this simple as the concept itself is pretty simple with what I'm adding also all the prices are the same so the math shouldn't be too hard. I'm just having a hard time wrapping my head around the easiest way to grab the saved data and properly display it in the cart.html.

Here is my HTML

<div class="medium-4 cell">
  <div class="grid-x">
    <div class="cell small-4">
      <h6>Color</h6>
    </div>
    <div class="cell small-8">
      <div class="button-group round-button-group">
        <div class="button round-button active" id="mediumGreyButton">
        </div>
        <div class="button round-button" id="beigeButton">
        </div>
        <div class="button round-button" id="brownButton">
        </div>
        <div class="button round-button" id="lightGreyButton">
        </div>
        <div class="button round-button" id="sandButton">
        </div>
      </div>
    </div>
  </div>
</div>
<div class="medium-4 medium-offset-1 cell">
  <div class="button-group">
    <a href="#" class="button products__button products__cart">
      <i class="fas fa-shopping-basket"></i>
    </a>
    <form class="add-to-cart" action="cart.html" method="post">
      <button class="button products__button products__bag" onclick="cartButton()">
        Add to Bag
      </button>
    </form>
  </div>
</div>

My styling code and framework is Zurb and I'm running it through SCSS here is the styling code for the products section as well as the input button $margin-top = 100px; (in case anyone is wondering).

SCSS

// Main Floss Stone Products Section

.products {
  margin-top: $margin-top;

.grid-container {
  padding-left: 0px;
  padding-right: 0px;
}

&__left-section {
 background-color: #e0eae5;
 height: 595px;
 padding-left: 3.4rem;
 padding-top: 5.5rem;

h1 {
  color: #111111;
  font-family: Poppins;
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.125rem;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
}
h1, h3 {
  margin-bottom: 0;
}
p {
  color: #333333;
  font-family: Poppins;
  font-size: 1rem;
  font-weight: 400;
  line-height: 2.125rem;
  letter-spacing: 0.05rem;
  padding-right: 7.1rem;
  padding-top: 1rem;
}

.small {
  font-size: 0.688rem;
  font-weight: 400;
  padding-right: 25rem;
  font-style: italic;
  line-height: 1rem;
  margin-bottom: 0;
}

.button-grid {
  padding-top: 1.5rem;
}

.medium-4 {
  h6 {
    font-family: Poppins;
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    margin-top: 0.7rem;
    padding-left: 20px;
  }
  .round-button-group {
    margin-top: 0.4rem;
  }
}

.round-button {
  border-radius: 100%;
  width: 1.5rem;
  height: 1.5rem;
  border: 0.188rem solid #ffffff;
  margin-left: 5px;
  margin-right: 5px;
  &:nth-child(1) {
    background-color: #b7b7b7;
  }
  &:nth-child(2) {
    background-color: #c39968;
  }
  &:nth-child(3) {
    background-color: #7d4900;
  }
  &:nth-child(4) {
    background-color: #f2f0f0;
  }
  &:nth-child(5) {
    background-color: #534741;
  }
 }
}

.active {
 border: 0.188rem solid #8da3af;
}

&__button {
 background-color: #8da3af;
 color: white;
 height: 3.125rem;
 font-family: Poppins;
 font-size: 0.875rem;
 font-weight: 400;
 line-height: 2.125rem;
 text-transform: uppercase;
 padding: 0.5em 0.7em;
}

&__right-section {
  padding: 0;
  .orbit-container {
  height: 600px;
   img {
    height: 600px;
  }
}
.orbit-previous {
  margin-top: 27.5%;
  margin-left: 87%;
  width: 3.75rem;
  height: 3.688rem;
  background-color: #c39968;
}
 .orbit-next {
  width: 3.75rem;
  height: 3.688rem;
  background-color: #c39968;
  margin-top: 27.5%;
  }
 }
}


// Input Cart Section

$input-number-size: 80px;
 .input-group {
   margin-bottom: 0;
   background-color: #8da3af;
   color: white;
}

.input-number-group {
  display: flex;
  justify-content: center;
  width: auto;
  padding-top: 0.3rem;
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
  appearance: none;
}

.input-group-button {
 line-height: calc(#{$input-number-size}/2 - 5px);
}

.input-number {
  width: 40px;
  padding: 0 12px;
  vertical-align: top;
  text-align: center;
  outline: none;
  display: block;
  margin: 0;
  background-color: #8da3af;
  border: none;
  color: white;
  box-shadow: none;
}

.input-number,
.input-number-decrement,
.input-number-increment {
  height: $input-number-size/2;
  user-select: none;
  border-radius: $global-radius;
}

.input-number-decrement,
.input-number-increment {
  display: inline-block;
  width: $input-number-size/2;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  font-size: 2rem;
  font-weight: 400;
}

 .input-number-decrement {
   margin-right: 0.3rem;
 }

 .input-number-increment {
  margin-left: 0.3rem;
 }
}

// End Input Cart Section

and here is my JavaScript

<script>
$(function () {
    $(".round-button").click(function () {
      $('div').removeClass('active');
      $(this).addClass("active");
    });
  });
</script>
<script>
function cartButton() {
  let mediumGreyElement = document.getElementById('mediumGreyButton');
  let beigeElement = document.getElementById('beigeButton');
  let brownElement = document.getElementById('brownButton');
  let lightGreyElement = document.getElementById('lightGreyButton');
  let sandElement = document.getElementById('sandButton');




  if (mediumGreyElement.classList.contains('active')) {
    sessionStorage.setItem("product", "Medium Grey Floss Stone");
    let qty = document.querySelector('input').value;
    sessionStorage.setItem("quantity", qty);
  }

  else if (beigeElement.classList.contains('active')) {
    sessionStorage.setItem("product", "Beige Floss Stone");
    let qty = document.querySelector('input').value;
    sessionStorage.setItem("quantity", qty);
  }
  else if (brownElement.classList.contains('active')) {
    sessionStorage.setItem("product", "Brown Floss Stone");
    let qty = document.querySelector('input').value;
    sessionStorage.setItem("quantity", qty);
  }
  else if (lightGreyElement.classList.contains('active')) {
    sessionStorage.setItem("product", "Light Grey Floss Stone");
    let qty = document.querySelector('input').value;
    sessionStorage.setItem("quantity", qty);
  }
  else if (sandElement.classList.contains('active')) {
    sessionStorage.setItem("product", "Sand Floss Stone");
    let qty = document.querySelector('input').value;
    sessionStorage.setItem("quantity", qty);
  }
  else {
    return
  }
}

</script>

Cart.HTML

    <form id="shopping-cart" action="cart.html" method="post">
    <table class="shopping-cart">
        <thead>
            <tr>
                <th scope="col">Item</th>
                <th scope="col">Qty</th>
                <th scope="col">Price</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</form>

Answer 1

If your are trying to store multiple product in session storage, then save the product and quantity into Arrays for products and quantity.
On cart page retrieve that array from session Storage, then you can use it into your page.
Hope this will help you.

You can follow along this example for you problem
.

 <!--Procut.html--> <!DOCTYPE html> <html> <body> <input type="text" id="prod"> <input type="text" id="qty"> <button id="btn">Save</button> <a href="cart.html">Cart</a> <script type="text/javascript" charset="utf-8"> let prod=document.getElementById("prod"); let qty=document.getElementById("qty"); let btn=document.getElementById("btn"); let product=[], quantity=[]; btn.addEventListener("click",function(){ newProd=prod.value; newQty=qty.value; let ArrIndex=product.indexOf(newProd); if(ArrIndex<0){ product.push(newProd) quantity.push(newQty); } else{ product[ArrIndex] = newProd; quantity[ArrIndex] = newQty; } window.sessionStorage.setItem("product",product); window.sessionStorage.setItem("quantity",quantity); console.log(product); console.log(quantity); }); </script> </body> </html> 

  <!--Cart.html--> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <script> let product=[], quantity=[];; product=window.sessionStorage.getItem("product").split(","); quantity=window.sessionStorage.getItem("quantity").split(","); console.log(product); for(let i=0;i<product.length;i++){ console.log("product : ",product[i] + ", quantity : ",quantity[i]); console.log(); } </script> </body> </html>