Javascript sessionstorage: неожиданное изменение значения

Question

Я сделал небольшой «виджет размера шрифта» для своего сайта. Теперь сегодня я пытался реализовать sessionstorage, поэтому пользователям не нужно нажимать кнопку все время.

Стандартный размер шрифта - 20. Теперь я понятия не имею, почему, но иногда, ТОЛЬКО, когда я нажимаю кнопку2 (чтобы иметь больший размер), значение становится буквально 20 + 2 => 202. Я не знать, как и почему.

У кого-нибудь есть идея о том, как повысить производительность и решить этот код? Или, если вы считаете, что файлы 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, ВСЕГДА будет строковым значением, так что вам нужно будет вернуть его обратно в целое число, прежде чем пытаться выполнить целочисленную математику.

Я предлагаю изменить код, чтобы быть явным о строках/целых числах. Это может выглядеть так:

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