La variable dérivée localStorage agit comme un entier lors de la soustraction initiale, mais comme une chaîne de caractères lors de l'addition initiale.

Question

Je rencontre un problème dans lequel une variable entière récupérée de LocalStorage se comporte de manière anormale en fonction de la première opération effectuée sur cette variable.

Si la première opération effectuée est une soustraction, la variable se comportera comme un entier. Toutes les autres opérations se déroulent normalement.

Toutefois, si la première opération effectuée est une addition, la variable sera traitée comme une chaîne de caractères. Toute autre addition la traitera également comme une chaîne de caractères, jusqu'à ce que la première opération de soustraction soit effectuée.

Voici le code en question (Pardonnez-moi pour toutes les alertes) :

<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> 

Et les étapes à suivre pour reproduire le problème :

Tout d'abord, appuyez sur les boutons "shrink" et "grow", dans l'ordre qui vous convient, pour vérifier que le script fonctionne.

Ensuite, rafraîchissez la page pour qu'elle recharge la variable à partir de localStorage, appuyez sur le bouton "shrink", puis sur les boutons "shrink" et "grow", et vous verrez qu'ils fonctionnent toujours.

Maintenant, rafraîchissez à nouveau, mais cette fois-ci, appuyez d'abord sur le bouton de croissance. La fonction d'agrandissement traite maintenant la variable comme une chaîne de caractères, tandis que la fonction de réduction reste inchangée.

Answer 1

Cette fonction 'localStorage.getItem' renvoie par défaut la valeur 'String'. C'est pourquoi elle effectue une concantation lorsqu'elle utilise "+". Cependant, lors de l'utilisation de '-', elle effectue un moulage de type vers int car il n'y a pas d'opération pour String.

Vous êtes confronté au fait que javascript fait du typecasting directement puisqu'il ne s'agit pas d'un langage fortement typé.

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

Answer 2

Parce que 1) le signe + est utilisé pour l'addition numérique et la concaténation. 2) localStorage stocke toujours les données sous forme de chaîne. Ainsi, après avoir récupéré les données de localStorage, vous devez d'abord saisir la valeur de Cast. Ensuite, vous effectuez votre tâche sur cette valeur.

Cela résoudra tout comportement indésirable de votre code.

type Casting ! !! est très utile.