For a course project, I am recreating a grocery store website and need assistance on how to retain the shopping cart values even after refreshing the webpage. Please inform me if more information is required...
<button type="button" id="subtract" onclick="decrease()">-</button>
<input class="quantity-box" type="text" id="text" value="0">
<button type="button" id="add" onclick="increase()">+</button>
<br>
<button class="add-button" onclick="add(1)"><i class="fa fa-cart-plus"></i>  ADD TO CART</button>
<div class="cart">
<h3 class="aisle-header">Shopping Cart</h3>
<!-- list of the articles in the cart -->
<ul id="items">
</ul>
<h3 id="total" style="text-align: right;">Total: 0 $</h3>
</div>
/* This script is to add increment and decrement quanity */
function decrease(){
var textBox = document.getElementById("text");
if (textBox.value > 0){
textBox.value--;
localStorage.setItem('quantity', textBox.value);
}
}
function increase(){
var a = 1;
var textBox = document.getElementById("text");
textBox.value++;
localStorage.setItem('quantity', textBox.value);
}
window.onload = function() {
var textBox = document.getElementById("text");
textBox.value = localStorage.getItem('quantity');
}
/* This script is to add quantity to cart */
// Cost of all products in the cart
var total = 0;
// Index
var i = 1;
// List of the amount of every product in the cart
var itemCost = [];
// Add to cart
function add(n){
// Getting all Id of the selected shirt(brand ex: nike, price and quantity)
brand = "name";
priceId = "price";
quantityId = "text";
// Getting details of the selected shirt
// brand
name = document.getElementById(brand).innerHTML;
// price
price = document.getElementById(priceId).innerHTML;
// quantity
quantity = document.getElementById(quantityId).value;
// Creating a li element to add it to ul
var node = document.createElement("LI");
// id of li element
item = "item"+i;
node.setAttribute("id", item)
// cost of the selected shirt
itemCost[i-1] = Number(price) * Number(quantity);
// Updating the index i
i += 1;
// text of the li element
var textnode = document.createTextNode(name+" "+quantity+" x $"+price+" ");
// add the text to li element
node.appendChild(textnode);
// add li element to ul list
document.getElementById("items").appendChild(node);
total += Number(price) * Number(quantity);
// update the total
document.getElementById("total").innerHTML = "Total: " + total.toFixed(2) + " $";
// Add a remove button
document.getElementById(item).innerHTML += '<button class= "deleItem" onclick="deleItem('+"'"+item+"'"+')">X</button>';
// you have to respect the order of: '' and ""
}
// Remove a product from the cart
function deleItem(eId){
document.getElementById(eId).remove();
// slice is string method
// eId (element Id) contain root + number (ex: item4)
// n is the number in eId
n = Number(eId.slice(-1)) - 1;
// remove the cost of the product deleted from the cart
total -= itemCost[n];
// Updating the cost of products in the cart
document.getElementById("total").innerHTML = "Total: " + total.toFixed(2) + " $";
}
Note: Although I can utilize AJAX, I lack experience with it. Kindly provide a concise explanation if necessary. HTML/JAVASCRIPT/CSS/AJAX