Javascript 会话存储：意外的值更改

Question

我为我的网站做了一点 "font-size widget"。现在，今天我正在寻找实现 sessionstorage 的方法，这样用户就不必一直点击按钮了。

标准字体大小是 20。现在，我不知道为什么，但有时，只有当我按下按钮 2（具有更大的尺寸）时，该值才变成 20 + 2 => 202。我不知道不知道如何或为什么。

有没有人知道如何提高性能并解决此代码？或者，如果您认为 cookie 是一个更好的主意，我将如何为这段代码实现 cookie？

var currentSize;
function confSize(){
  if (sessionStorage.getItem('sessionSize') == ""){
      $("#body").css("font-size", "20px");
  }
  else {
      currentSize = sessionStorage.getItem('sessionSize');
      $("#body").css("font-size", currentSize + "px");
      console.log(sessionStorage.getItem('sessionSize'))
  }


    $("#button2").click(function(){
        if (currentSize == 20){
            currentSize = 22;
        }
        else {
            currentSize = currentSize + 2;
        }

        sessionStorage.setItem('sessionSize', currentSize);
        $("#body").css("font-size", currentSize + "px");
    });

    $("#button").click(function(){
        currentSize -= 2;
        sessionStorage.setItem('sessionSize', currentSize);
        $("#body").css("font-size", currentSize + "px");
    });

}

Answer 1

您需要确保正确地将值用作字符串和适当的整数。如果您执行以下操作：

currentSize = currentSize + 2

根据 currentSize 当前是字符串还是整数，您将获得不同的值。如果它是一个字符串，则会出现您注意到的串联问题。

现在，您实际上将这个问题与以下问题结合在一起：当您将整数 currentSize 值插入 sessionStorage 时，会自动进行整数到字符串的转换以进行存储（从技术上讲 .toString() 方法会在您尝试存储的任何内容上调用以确定要存储的字符串值）。您从 sessionStorage 中检索到的内容将始终是一个字符串值，因此在尝试对其进行整数数学运算之前，您需要将其转换回整数。

我建议修改您的代码以明确 strings/integers。这可能看起来像这样：

var currentSize;
function confSize(){
   var defaultSize = 20;
   var sessionStorageStr = sessionStorage.getItem('sessionSize');
   if (sessionStorageStr == ""){
      currentSize = defaultSize;
   }
   else {
      currentSize = parseInt(sessionStorageStr);
      console.log(currentSize);
   }

   // no need to repeat this code in both sides of the conditional above
   $("#body").css("font-size", currentSize + "px");


   $("#button2").click(function(){
        // I removed your conditional here, as it really did nothing        
        currentSize += 2;
        sessionStorage.setItem('sessionSize', currentSize);
        $("#body").css("font-size", currentSize + "px");
    });

    $("#button").click(function(){
        currentSize -= 2;
        sessionStorage.setItem('sessionSize', currentSize);
        $("#body").css("font-size", currentSize + "px");
    });
}

Javascript 会话存储：意外的值更改

Javascript sessionstorage: unexpected value change

html

javascript

cookies

session-storage

web