estoy haciendo un carrito de compras pero primero quiero que al presionar comprar el contador se quede con el mismo valor al pasar a otras paginas, eso funciona el problema es que cuando vuelvo al index y vuelvo a presionar comprar se reinicia el contador de nuevo y quisiera q eso no pase:
(tambien intente poner el localStorage.setItem afuera de la function click pero asi solo me funciona el contador en el index entonces ya no se como hacer q funcione)
$(document).ready(function() {
let contador = 0;
$(".comprar").click(function() {
contador++;
$(".contador").text(contador);
localStorage.setItem("contadorCarrito", contador);
})
const contadorCarritoLS = localStorage.getItem("contadorCarrito");
$(".contador").text(contadorCarritoLS);
})
* {
margin: 0;
padding: 0;
}
header {
background: #000;
}
.agregar {
color: #fff;
font-family: sans-serif;
font-weight: bold;
display: inline-block;
}
ul li a {
text-decoration: none;
text-align: center;
margin-right: 100px;
margin-left: 200px;
}
a {
color: #fff;
font-family: sans-serif;
font-weight: bold;
}
nav ul li {
display: inline-block;
}
nav {
background: #000;
padding: 5px;
}
.carrito {
margin-left: 558px;
}
.carrito,
.contador {
color: #fff;
font-family: sans-serif;
font-weight: bold;
display: inline-block;
}
.productos {
display: flex;
flex-direction: row;
background: #000;
margin-top: 20px;
justify-content: center;
padding: 10px;
width: 500px;
margin: auto;
text-align: center;
}
.productos>div {
background: #78288C;
padding: 10px;
border: 1px solid #fff;
width: 200px;
color: #fff;
}
input {
background: #000;
color: #fff;
padding: 2px;
width: 100px;
border: 0;
outline: 0;
font-weight: bold;
}
input:hover {
background: #fff;
color: #000;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/pages.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/carrito.js"></script>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="page1.html">PAGE1</a></li>
<li><a href="page2.html">PAGE2</a></li>
<li><a href="page3.html">PAGE3</a></li>
</ul>
</nav>
<div class="carrito">carrito
<p class="contador">0
<p>
</div>
</header>
<br><br>
<section class="productos">
<div>
<p class="precio1">100</p>
<input type="submit" value="comprar" class="comprar">
</div>
<div>
<p class="precio2">300</p>
<input type="submit" value="comprar" class="comprar">
</div>
<div>
<p class="precio3">500</p>
<input type="submit" value="comprar" class="comprar">
</div>
<div>
<p class="precio4">800</p>
<input type="submit" value="comprar" class="comprar">
</div>
</section>
</body>
</html>
<!--page2--->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/carrito.js"></script>
<link rel="stylesheet" type="text/css" href="css/pages.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="page1.html">PAGE1</a></li>
<li><a href="page2.html">PAGE2</a></li>
<li><a href="page3.html">PAGE3</a></li>
</ul>
</nav>
<div class="carrito">carrito
<p class="contador">0
<p>
</div>
</header>
<h2>otra pagina</h2>
</body>
</html>
<!----page3--->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/carrito.js"></script>
<link rel="stylesheet" type="text/css" href="css/pages.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="page1.html">PAGE1</a></li>
<li><a href="page2.html">PAGE2</a></li>
<li><a href="page3.html">PAGE3</a></li>
</ul>
</nav>
<div class="carrito">carrito
<p class="contador">0
<p>
</div>
</header>
<h2>otra pagina</h2>
</body>
</html>