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

【问题标题】：How to store variable in session storage如何在会话存储中存储变量
【发布时间】：2020-09-17 12:50:48
【问题描述】：

我通过按钮增加字体大小，但我不知道如何在会话中存储字体大小。每次更改页面字体大小时都会重置。我尝试使用 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);

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

【问题讨论】：

你在哪里调用加载函数？
点赞if (sessionStorage.getItem('font-size')) { // set the font-size}
当我更改页面字体大小时会重置。您是否正在重新加载浏览器？
他没有准备好读取 sessionStorage。这里的功能仅适用于点击功能
我添加了 if(sessionStorage...)，但是当我转到另一个子页面时，字体大小被重置

标签： javascript html jquery wordpress

【解决方案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);

【讨论】：

添加文档就绪功能时出现错误：$ 不是功能
而且字体不增减
它存储正确的值，但不能正常工作 $("html").css("font-size", size);
@ncti 我稍微更改了代码 (sn-p)，它现在应该可以工作了
现在它运行良好。非常感谢！ :)

【解决方案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'));
}

【讨论】：