使用 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';
  }
}