localStorage производная переменная действует как целое при вычитании, но строка при первоначальном добавлении

Question

У меня возникает проблема, в которой целочисленная переменная, полученная из LocalStorage, будет действовать ненормально в зависимости от того, какая операция сначала выполняется над ней.

Если первая выполненная операция является вычитанием, переменная будет действовать как целое число. Любые дальнейшие операции выполняются как обычно.

Если первая выполненная операция является дополнением, однако она будет обрабатывать переменную как строку. Любые дополнительные дополнения будут обрабатывать его также как строку, пока не будет выполнена первая операция вычитания.

Вот код в вопросе (Прости меня за все предупреждения):

<script type="text/javascript"> 
    var line = 125; 

    if (localStorage.getItem("gtLine") !== null) { 
     line = localStorage.getItem("gtLine"); 
    } 
    function shrink() { 
     alert(line); 

     line -= 10; 

     alert(line); 
     localStorage.setItem("gtLine", line); 
    } 
    function grow() { 
     alert(line); 

     line += 10; 

     alert(line); 
     localStorage.setItem("gtLine", line); 
    } 
    function reset() { 
     line = 125; 
     localStorage.setItem("gtLine", line); 
     alert(line); 
    } 
</script> 

<button onClick="javascript:shrink();">Shrink</button> 
<button onClick="javascript:grow();">Grow</button> 
<button onClick="javascript:reset();">reset</button> 

И шаги для воспроизведения проблемы:

Сначала нажмите усадку и расти кнопки, в любом порядке, который вам подходит, чтобы увидеть, что скрипт работает.

Затем обновите страницу, чтобы она перезагружала переменную из localStorage, нажмите кнопку усадки, а затем нажмите кнопки усадки и увеличения и убедитесь, что они все еще работают.

Теперь обновите снова, но на этот раз нажмите кнопку «Увеличить». Функция роста теперь обрабатывает переменную как строку, а функция усадки остается неизменной.

Answer 1

Эта функция 'localStorage.getItem' по умолчанию возвращает значение как 'String'. Вот почему он использует конкатенацию при использовании «+». Однако при выполнении '-' это тип casting для int, поскольку для String нет операции.

Вы сталкиваетесь с тем, что javascript делает приведение типов непосредственно, поскольку это не строго типизированный язык.

'a' + 10 = a10 
'11' + 10 = 110 
'a' - 10 = NaN 
'11' - 10 = 1 

Answer 2

Поскольку 1) Знак + используется для численного сложения и конкатенации. 2) localStorage всегда хранит данные как строку. Итак, после захвата данных из localStorage, вы сначала напечатаете Cast. Затем выполните свою задачу по этому значению.

Это решит любое нежелательное поведение вашего кода.

тип Casting !!! очень полезно.