<script> var sum = 0; var pressYet = false; function changeIt() { if(pressYet == false){ sum++; document.getElementById('test').innerHTML = sum; pressYet = true; } else { document.getElementById('test').innerHTML = "You have already pressed the button"; document.getElementById("button").style.visibility = "hidden"; } } </script> <div id="test"> <b> <var> Test </ var> </b> </div> <button onclick="changeIt()" id = "button" >Press If you are here</button>Así que tengo este dulce botón épico en mi sitio web, es genial, pero quiero mejorarlo. Me preguntaba cómo hacer que la variable 'sum' no se reinicie cada vez que actualizo mi sitio web. Sé que hay un término para eso, pero por mi vida no puedo entenderlo. Lo quiero para que cada vez que alguien presione el botón, se le agregue uno a 'sum' y ese número sea permanente. Entonces, con el tiempo, ese número se vuelve muy grande.
Soy muy nuevo en HTML, así que por favor sean amables conmigo.
Puede guardar el valor en localStorage y luego recuperarlo de localStorage después de cargar la página. Luego, sobre la base de los datos, puede ajustar la página. He modificado ligeramente tu código aquí.
var sum = 0; var pressYet = localStorage.getItem('pressYet'); function changeIt() { if (pressYet == null) { sum++; document.getElementById('test').innerHTML = sum; pressYet = true; localStorage.setItem('pressYet', pressYet); } else { document.getElementById('test').innerHTML = "You have already pressed the button"; document.getElementById("button").style.visibility = "hidden"; } } (function init() { if (localStorage.getItem('pressYet') != null || localStorage.getItem('pressYet') != "") { document.getElementById('test').innerHTML = "You have already pressed the button"; document.getElementById("button").style.visibility = "hidden"; } })(); <div id="test"> <b> <var> Test </ var> </b> </div> <button onclick="changeIt()" id="button">Press If you are here</button>Puede ver la demostración https://jsfiddle.net/5jyrk6s8/