刷新頁面時 SessionStorage 不起作用

Question

我想通過單擊按鈕來調整正文 html 的字體大小
首先，當我單擊我的 2 個按鈕來調整字體大小時，它可以完美地工作：第一個使我的文本正文正常大小，第二個使其更大，1.5em ......但是當我刷新頁面時它會取消。 有人能幫我嗎？ 謝謝 ！

 function functionSize() { var smallSize = document.getElementById("smallSize"); var bigSize = document.getElementById("bigSize"); smallSize.onclick= function() { sessionStorage.setItem("size","1em") document.body.style.fontSize=sessionStorage.getItem("size") } bigSize.onclick = function(){ sessionStorage.removeItem("size"); sessionStorage.setItem("bigSize","1.5em") document.body.style.fontSize=sessionStorage.getItem("bigSize") } } functionSize()

 <div class="button-resize"> <button class="small-size" id="smallSize">A</button> <button class="big-size" id="bigSize">A</button> </div>

Answer 1

您必須在加載頁面后調用 init：

function initFunctionSize() {
  var smallSize = document.getElementById("smallSize");
  var bigSize = document.getElementById("bigSize");

  smallSize.onclick = function () {
    setSize("1em");
  }
  bigSize.onclick = function () {
    setSize("1.5rem");
  }
  // init:
  if (sessionStorage.getItem("size")) {
    document.body.style.fontSize = sessionStorage.getItem("size");
  }
}

function setSize(size) {
  sessionStorage.setItem("size", size);
  document.body.style.fontSize = size;
}

initFunctionSize();