使用 javascript 重新加载页面时如何更改按钮名称并保存

Question

我有一个带有按钮的页面，当我单击它时它会更改，但是如果我重新加载页面，它会按原样返回而不更改 html

<button onload="form1.reset();" class="button" id="movetool10" onclick="movetool10();stoptool10()">حجز</button>

javascript

var clickCounter10 = 0;
var movetool10 = document.getElementById('movetool10')
movetool10.onclick = function() {
clickCounter10++;
if (clickCounter10 ===2) {
clickCounter10 = 0;
document.getElementById('movetool10').innerHTML = 'click !';
}
else {
document.getElementById('movetool10').innerHTML = 'click me';
}
};

Answer 1

您可以使用 localStorage，将最后一个计数器值保存在那里并在开始时获取它，如果存在，请使用它。 否则，在第一次渲染时将计数器初始化为 0（或有人清除 localStorage）。 请注意，这仅在客户端，因此如果用户清除 localStorage，计数器将重新初始化。

现在，该按钮从其最后一个 state 出现。 它在两种状态之间切换，您可以根据需要更改逻辑，但这就是您可以使用 localStorage 的方式。

JSFiddle

var clickCounter10 = window.localStorage.getItem('clickCounter10') || 0;
var movetool10 = document.getElementById('movetool10');

changeBtn();
movetool10.onclick = function() {
  clickCounter10++;
  window.localStorage.setItem('clickCounter10', clickCounter10);
  changeBtn();
};

function changeBtn() {
  clickCounter10 = parseInt(clickCounter10, 10);
  if (clickCounter10 === 2) {
    clickCounter10 = 0;
    document.getElementById('movetool10').innerHTML = 'click !';
  } else if(clickCounter10 !== 0) {
    document.getElementById('movetool10').innerHTML = 'click me';
  }
}