如何在会话存储中存储变量

Question

我通过按钮增加字体大小，但我不知道如何在会话中存储字体大小。 每次更改页面字体大小时都会重置。 我尝试使用 sessionStorage，但可能我做错了。

(function ($) {

    var defaultFontSize = $('html').css('font-size');

    $(".resetMe").click(function () {
        $('html').css('font-size', defaultFontSize);
    });

    $(".increase").click(function () {
        var fontSize = getFontSize();
        var newFontSize = fontSize * 1.15;
        if (newFontSize > 11.5) {
            return false;
        } else {
            setFontSize(newFontSize);
            storeFontSize(newFontSize);
            return false;
        }

        return false;
    });

    $(".decrease").click(function () {
        var fontSize = getFontSize();
        var newFontSize = fontSize * 0.85;
        if (newFontSize < 8) {
            return false;
        } else {
            setFontSize(newFontSize);
            storeFontSize(newFontSize);
            return false;
        }

        return false;
    });

    function getFontSize() {
        var currentSize = $("html").css("font-size");
        var currentSizeNumber = parseFloat(currentSize, 12);
        if (currentSizeNumber > 12) {
            return false;
        }
        if (currentSizeNumber < 10) {
            return false;
        }
        return currentSizeNumber;

    }

    function setFontSize(size) {
        $("html").css("font-size", size);
        $(".actualSize").html(size);


    }

    function storeFontSize(size) {
        if (sessionStorage) {
            sessionStorage.setItem('font-size', size);
            console.log(sessionStorage.length) // 1 element
            // 1st element
            console.log(sessionStorage.key(0)); //
            
            console.log(sessionStorage.length) // 1 - tylko
            sessionStorage.getItem('font-size');
            $("html").css("font-size",  sessionStorage.getItem('font-size'));
            $(".actualSize").html( sessionStorage.getItem('font-size'));

        }
    }

})(jQuery);

我在控制台中看到一些值是存储，但我无法在会话中设置此字体大小。

Answer 1

您需要在页面加载时读取sessionStorage 。 这可以通过$(document).ready来完成

(function ($) {
  $(document).ready(function () {
    var size = sessionStorage.getItem("font-size") || 12;
    setFontSize(size);
  });

  var defaultFontSize = $("html").css("font-size");

  $(".resetMe").click(function () {
    $("html").css("font-size", defaultFontSize);
    storeFontSize(defaultFontSize);
  });

  $(".increase").click(function () {
    var fontSize = getFontSize();
    var newFontSize = fontSize * 1.15;

    if (newFontSize < 20) {
      // Not higher then 20
      storeFontSize(newFontSize);
    }
  });

  $(".decrease").click(function () {
    var fontSize = getFontSize();
    var newFontSize = fontSize * 0.85;

    if (newFontSize > 8) {
      // Not lower then 8
      storeFontSize(newFontSize);
    }
  });

  function getFontSize() {
    var currentSize = $("html").css("font-size");

    return parseFloat(currentSize, currentSize);
  }

  function setFontSize(size) {
    $("html").css("font-size", size + "px");
    $(".actualSize").html(size);
  }

  function storeFontSize(size) {
    console.log(size);
    sessionStorage.setItem("font-size", size);

    setFontSize(size);
  }
})(jQuery);

Answer 2

您缺少加载功能，该功能会在页面加载时使用您的存储空间。

if (sessionStorage.getItem("font-size")) {
  // A font-size has been saved in the sessionstorage
  $("html").css("font-size",  sessionStorage.getItem('font-size'));
  $(".actualSize").html( sessionStorage.getItem('font-size'));
}