当我刷新页面时，SessionStorage不会出错

Question

我想通过单击按钮来调整body 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();