單擊並保存時更改按鈕名稱

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

你可以玩存儲
Storage.setItem() 和 Storage.getItem()
設置文本

Answer 2

您可以使用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在 Stack Snippets 中不起作用： https : //jsfiddle.net/2wm6cgkn/