JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<body>

<div>
	<button id="myBtn"> Add to basket</button>

	<p> Total Count is <span id="total"></span></p>
</div>
</body>
</html>

JavaScript

let basketData = {
		basketQty: 0,
		products: []
	};

	if (localStorage.getItem("basketData") === null) {
		localStorage.setItem("basketData", JSON.stringify(basketData));
	}

	if(localStorage && localStorage.getItem('basketData')){
		var getItem = getLocalStorageDate("basketData");
  		document.getElementById("total").innerHTML = getItem.basketQty;
	} else {
		document.getElementById("total").innerHTML = 0;
	}


	document.getElementById("myBtn").addEventListener("click", function(){
		var getItem = getLocalStorageDate("basketData");
		getItem.basketQty = getItem.basketQty+1;
		updateLocalStorage(getItem);
		document.getElementById("total").innerHTML = getItem.basketQty;
	});

	function getLocalStorageDate(key) {
		return JSON.parse(localStorage.getItem(key));
	}

	function updateLocalStorage(data) {
		localStorage.setItem("basketData", JSON.stringify(data));
	}