javascript - 单击时更改按钮名称并保存

Question

我的按钮

<button id="status" onclick="myFunction()">Oczekująca</button>

还有JS

<script>
function myFunction() {
var btn = document.getElementById("status");
if (btn.innerHTML=="Oczekująca") btn.innerHTML = "Zakończona";
else btn.innerHTML = "Oczekująca";
}
</script>

现在它会在点击时更改名称，但当我刷新页面时，名称始终为“Oczekująca”，有没有办法即使在刷新页面后，名称仍保留在“Zakończona”上？

Answer 1

您可以使用Window.localStorage在页面加载之间保存按钮标签(或任何其他信息):

<button id="status" onclick="myFunction()">Oczekująca</button>

<script>
var btn = document.getElementById("status");

function myFunction() {
  if (btn.innerHTML=="Oczekująca") btn.innerHTML = "Zakończona";
  else btn.innerHTML = "Oczekująca";

  // save the current label to localStorage via setItem()
  window.localStorage.setItem('btnLabel', btn.innerHTML);
}

// on page load, get the saved label from localStorage via getItem()
var btnLabel = window.localStorage.getItem('btnLabel');
if (btnLabel) {
  btn.innerHTML = btnLabel;
}
</script>

请参阅此处的工作示例，因为出于安全原因，localStorage 在堆栈片段中不起作用: https://jsfiddle.net/2wm6cgkn/