How to store variable in session storage

Question

I making increase font size by buttons but I don't know how to store fonts sizes in session. Each time when I change page fonts size are reset. I trying use sessionStorage but probably I'm doing it wrong.

(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);

I see in console that some value is storage but I can't set this font size in session.

Answer 1

You need to read the sessionStorage when the page loads. This can be done with $(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

You are missing the load functionality, that uses your storage, when the page loads.

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'));
}