我的本地存储字体大小最初不起作用

Question

我的localstorage字体大小+-一般来说，但是，在加载初始字体大小+2后，会得到字符串值，例如，初始字体大小(16)+2=162。我认为初始大小值应该是一个变量，而不仅仅是一个字符串。但是，最初的字体大小，localstorage getitem值是一个字符串。之后，它运行良好。如何将初始字体大小值转换为变量？提前感谢您的回答。

<div id="font-size-change">
<span class="font-size-label">font size</span>
<button id="fs_up">+</button>
<span id="fs_write" style="width:15px;"></span>
<button id="fs_down">-</button>
</div>
<script>
$(document).ready(function() {  // === Font Size Control =============================================================
var reset = $('#stx').css('fontSize'); // Grab the default font size  
var elm = $('#stx'); // Font resize these elements
var size = localStorage.getItem('size');
var size = parseInt(size, 10);
if (size) {
elm.css('font-size', size + 'px');
$( "#fs_write" ).text(size); // 
} else {    
size = str_replace(reset, 'px', ''); //set the default font size and remove px from the value
$( "#fs_write" ).text(size); // 
}  
var min = 12; //min  
var max = 56; //max 
var p = 4; //increase
var m = 4; //decrease
$('#fs_up').click(function() { //Increase font size
if (size <= max) { //if the font size is lower or equal than the max value 
size = size + p; //increase the size     
elm.css({ //set the font size
'fontSize': size
});
$( "#fs_write" ).text(size); // 
localStorage.setItem('size', size);
}    
return false; //cancel a click event
});
$('#fs_down').click(function() {    
if (size >= min) { //if the font size is greater or equal than min value     
size = size - m; //decrease the size    
elm.css({ //set the font size
'fontSize': size
});
$( "#fs_write" ).text(size); // 
localStorage.setItem('size', size);
}   
return false; //cancel a click event
});
$('#fs_write').click(function() { //Reset the font size   
elm.css({ //set the default font size 
'fontSize': reset
});
size = str_replace(reset, 'px', '');
$( "#fs_write" ).text(size); // 
localStorage.setItem('size', size);
});
});
//A string replace function
function str_replace(haystack, needle, replacement) {
var temp = haystack.split(needle);
return temp.join(replacement);
}
</script>

Answer 1

解释：

这是因为+运算符既用作算术运算符(如果两个操作数都是数字)，又用作字符串串联运算符(如果至少有一个操作数是字符串)。

size变量最初是一个数字，因为您在代码开始时使用parseInt来获取其值。但是在#fs_write点击事件监听器中，您可以将其转换回字符串：

size = str_replace(reset, 'px', '');     // size is now a string because the return value of str_replace is a string

然后，当单击#fs_up时，将p添加到size(现在是一个字符串)：

size = size + p;                         // string concatenation is chosen over arithmitic addition because one of the operands (size) is a string

这导致了问题。

解决方案：

在使用+运算符之前，只需将size转换为数字即可，使用：Number、parseInt或unary +运算符：

size = +size + p;                        // using the unary + (now size is a number and p is also a number thus the arithmitic addidtion is chosen over the string concatenation)
// or
size = Number(size) + p;                 // using Number

注意：

1. #fs_down点击事件侦听器不会导致问题，因为-运算符仅用作算术运算符。因此，当一个或两个操作数都是字符串时，它会自动用作数字("55" - "10" === 45，但"55" + 10 === "5510")
2. 您在代码开始时重新声明size，这是不必要的。保留第一个var size = ...;，使用不带var的第二个size = ...;