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/

单击更改按钮名称并保存

1 个答案: