Estoy replicando la página web de una tienda de comestibles para un proyecto de curso y me gustaría saber cómo mantener el valor en el cuadro de cantidad incluso después de que se haya actualizado la página web.
<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> <script> function decrease(){ var textBox = document.getElementById("text"); if (textBox.value>0){ textBox.value--; } } function increase(){ var a = 1; var textBox = document.getElementById("text"); textBox.value++; } </script>Nota: puedo usar AJAX, pero no estoy familiarizado con esto, por lo que si está incluido en la solución, bastaría con una breve explicación. HTML/JAVASCRIPT/CSS/AJAX
Puede usar cookies, crear dos funciones de configuración y obtención de cookies, y luego usarlas para configurar el valor de la cantidad en las cookies, tendrá que obtener la cookie de cantidad mientras carga la página web, ya que necesita establecer el valor de cantidad incluso si se recarga la pagina.
Aquí hay un ejemplo de cómo puedes lograr lo que quieres hacer. salud...
window.onload = function(){ document.getElementById("text").value = getCookie("quantity"); } function decrease() { var currentValue = document.getElementById("text").value; if (currentValue > 0) { document.getElementById("text").value = --currentValue; setCookie('quantity', currentValue); } } function increase() { var currentValue = document.getElementById("text").value; currentValue = currentValue? currentValue: 0; document.getElementById("text").value = ++currentValue; setCookie('quantity', currentValue); } function setCookie(name, value) { var d = new Date(); var days = 10; // expires in days d.setTime(d.getTime() + (days*24*60*60*1000)); var expires = "expires="+ d.toUTCString(); document.cookie = name + "=" + value + ";" + expires + ";path=/"; } function getCookie(name) { var name = name + "="; var decodedCookie = decodeURIComponent(document.cookie); var ca = decodedCookie.split(';'); for(var i = 0; i <ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; } <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>También puede usar localStorage
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'); }