Passing info througout different HTML pages with Javascript? Shopping cart problem-CodePudding

So i am working on this college work i have where i need to build a e-commerce store. and i have this javascript code on the single product page and it is working perfectly, for example, when i click on the add-to-cart button it is added to the shopping-cart container. And now my problem is and i have no idea on how to do it. Is it even possible to pass that info (what has been inserted into the shopping-cart) through out the dif html pages. Like if i add one product to the cart and go back to the homepage, it should still appear on the shopping-cart container.

const decrementButton = document.querySelector(".decrement-quantity");
const incrementButton = document.querySelector(".increment-quantity");
const quantityDisplay = document.querySelector(".quantity-display");
let quantity = 1;
const maxQuantity = 4;

let remainingStock = maxQuantity;
decrementButton.addEventListener("click", function() {
  if(quantity > 1) {
      quantity--;
      quantityDisplay.textContent = quantity;
      incrementButton.disabled = false;
      // Check if the tooltip element is present and remove it
      const tooltip = incrementButton.querySelector(".tooltip");
      if (tooltip) {
          incrementButton.removeChild(tooltip);
      }
  }
  if (quantity === 0) {
      addToCartBtn.disabled = true;
  }
});


incrementButton.addEventListener("click", function() {
  if(quantity < remainingStock) {
      quantity  ;
      quantityDisplay.textContent = quantity;
      incrementButton.disabled = false;
  } 
  if(quantity === remainingStock) {
      incrementButton.disabled = true;
      const tooltip = document.createElement("div");
      tooltip.setAttribute("data-tooltip", "");
      tooltip.innerHTML = "Sorry, no more products available";
      incrementButton.appendChild(tooltip);
      
  }
});



const addToCartBtn = document.getElementById("add-to-cart-btn");
const cartCount = document.getElementById("cart-count");
const shoppingCartContainer = document.getElementById("shopping-cart");
const slide1 = document.querySelector("#slide-1");
const imageSrc = slide1.src;
let image = document.querySelector('.product-slider img');
let value = document.getElementById("value");




let currentCount = 0;

addToCartBtn.addEventListener("click", function() {
  currentCount  = quantity;
  remainingStock -= quantity;
  cartCount.innerHTML = `(${currentCount})`;
  quantity = remainingStock;
  quantityDisplay.textContent = remainingStock;

  // Create a new div to represent the product
  const productDiv = document.createElement("div");
  productDiv.classList.add("product");

  
  
  // Set the content of the div to the name, price, and image of the product
  productDiv.innerHTML = `
    <img src="${imageSrc}" alt="Aimé Leon Dore x 550 'Evergreen'">
    <h4>"${image.alt}"</h4>
    <p>${value.textContent}</p>
  `;
  shoppingCartContainer.appendChild(productDiv);
  
  if(remainingStock === 0){
    incrementButton.disabled = true;
    decrementButton.disabled = true;
    addToCartBtn.disabled = true;
    const tooltip = document.createElement("div");
    tooltip.setAttribute("data-tooltip", "");
    tooltip.innerHTML = "Sorry, no more products available";
    addToCartBtn.appendChild(tooltip);
  }
});


const cartMenuItem = document.getElementById("cart");
const shoppingCart = document.getElementById("shopping-cart");
const closeShoppingCart = document.getElementById("close-shopping-cart");


cartMenuItem.addEventListener("click", function() {
  if(shoppingCart.classList.contains("hidden")){
    shoppingCart.classList.remove("hidden");
  }else{
    shoppingCart.classList.add("show");
  }
});
closeShoppingCart.addEventListener("click", function() {
  if(shoppingCart.classList.contains("show")){
    shoppingCart.classList.remove("show");
  }else{
    shoppingCart.classList.add("hidden");
  }
});

So the main question is, is it possible to pass that kind of info with javascript? mind that, that everything needs to be hardcode, my professor doesn't let us use external libraries or frameworks -.-'

CodePudding user response：

Because you are only allowed to use frontend technologies, your possibilities are very limited. Without this limitation a backend would solve this problem. The backend creates a session for the user (a cookie is stored in the browser) and then assigns all HTTP requests to this user. More about this: What are sessions? How do they work?.

Therefore you need a way to store data with JavaScript and keep it peristent over multiple pages. Theoretically you can use cookies, but this is unnecessarily complicated and sometimes browsers forbid JavaScript to manipulate cookies. Therefore I don't recommend this solution.

It is better to use localStorage. This storage option is designed exactly for use-cases like this. The data remains persistent across multiple pages and even survives browser restarts. The usage is also very simple:

// Store data
localStorage.setItem('numberOfItems', '5');

// Read data
const number = localStorage.getItem('numberOfItems');

You can also use sessionStorage. This works exactly like localStorage, but the data is removed as soon as the page session ends. This session has nothing to do with the sessions above that the backend uses.

CodePudding user response：

Cookies

If you want persistent data, but do not save it server side
(but in case of using a server, you also need at least one session/token cookie to link the data).

Local Storage
As mentioned in the comments.