Кто-нибудь знает, почему возникает эта проблема с математикой и локальным хранилищем?

Question

Я пытаюсь создать javascript / HTML-игру, в которой точки могут быть сохранены за несколько посещений сайта, и функция сохранения работает просто отлично, но когда я превращаю это в переменную точек при загрузкестраница, оператор + = не будет работать.Вместо того, чтобы использовать дополнение для обновления переменной, он просто добавляет число в конец значения переменной.Примером этого может быть, если бы вы сказали, что 100 + = 1, так что было бы логично, чтобы выходное значение было 101, но вместо этого оно будет равно 1001.

Я понял, что это на самом делеМестное хранилище.Если просто установить баллы, которые я пытаюсь отобразить, равными 0, а не прошлым счетом, то это работает нормально.Возможно, эта ошибка возникает из-за того, что я использую бесплатный веб-хостинг с repl.it, поэтому я делю домен со многими другими сайтами.Я думал о тестировании, будет ли оно лучше работать с куки, но я никогда не использовал куки, поэтому я решил сначала проверить здесь, прежде чем пытаться их изучить.

    var points = 0;
    points += localStorage.points;
    // The below is tied to a save button 
    function saveData() {
      localStorage.points = points;
    }
    /*This is also tied to a button with an amount of one, and this is 
    where errors occur. */
    function addPoints(amount) {
      points += amount;
    } 

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

Answer 1

localStorage всегда хранит значения в виде строк.Выдержка из mozilla :

Ключи и значения всегда являются строками (обратите внимание, что, как и в случае с объектами, целочисленные ключи будут автоматически преобразованы в строки).

Вам нужно сначала привести points к числу.

var points = 0;
points += +localStorage.points; // + casts it to a number

Answer 2

Все данные, хранящиеся в localStorage , представляют собой string (или undefined).

Таким образом, вместо сложения оператор += выполнит конкатенацию строк.

Попробуйте это: points += +localStorage.points или points += Number(localStorage.points)

Вы также должны убедиться, что начальное значение не равно undefined.

Полное решение будет:

    var points = 0;
    if (localStorage.getItem('points') !== null) { 
       // ^^ Similar to localStorage.points !== undefined
       points += +localStorage.points; // Now points won't be type-casted to string
    }
    function saveData() {
      localStorage.points = points;
    }
    /*This is also tied to a button with an amount of one, and this is 
    where errors occur. */
    function addPoints(amount) {
      points += amount;
    } 

Чтобы понять, почему это происходит, запустите этот пример:

const p = 0;
const s = '1';
const n = 1;
console.log(`p + s = ${p + s}, ${typeof(p+s)} | p + n = ${p + n}, ${typeof(p+n)} | p + +s = ${p + +s}, ${typeof(p + +s)}`);