CODEWITHSUNDEEP
javascripthtmljscript
prk
prk

Reputation: 3809

localStorage keeps adding '0'. (jScript & HTML5)

Well, my code have been working fine and I'm simply trying to make a simple game, until I added this (due to that I wanted to learn how to save the info to the users local storage):

if(localStorage.getItem('money'))
{
    var Money = localStorage.getItem('money');
    document.getElementById('test').innerHTML="EXISTS";
} else {
    localStorage.setItem('money', 0);
    var Money = localStorage.getItem('money');
    document.getElementById('test').innerHTML="DOES NOT EXIST";
}

My full code looks like this:

<head><meta charset="UTF-8"></head>
<body><span id='test'></span>
Generated something: <span id='money'>0$</span> (money per click: <span id='MPC'>1$</span>)
<br />
Upgrade 1 upgrades: <span id='u1Us'>0</span> (production rate: <span id='u1Pr'>0</span>)
<br />
<span id='updates'></span>
<br />
<button onClick='mButton()'>Generate something.</button>
<br /><br />
<b>Upgrades:</b>

<br /><br />Generator upgrades:<br />
<button onClick='buyU1()'>Buy upgrade 1. ($30)</button>
<br /><br />Self-generated upgrades:<br />
<button onClick='buySG1()'>Buy Self-Generated Upgrade 1 ($500)</button>
</body>
<script>
if(localStorage.getItem('money'))
{
    var Money = localStorage.getItem('money');
    document.getElementById('test').innerHTML="EXISTS";
} else {
    localStorage.setItem('money', 0);
    var Money = localStorage.getItem('money');
    document.getElementById('test').innerHTML="DOES NOT EXIST";
}

var U1Amount = 0;
var cMoney = 1;

function mButton()
{
    Money += cMoney;
    document.getElementById('money').innerHTML=Money + "$";
}
function buyU1()
{
    if(Money < 30)
        {
            document.getElementById('updates').innerHTML="You do not have enough money.";
            resetUpdates();
        } else {
            Money -= 30;
            U1Amount += 1;
            document.getElementById('u1Us').innerHTML=U1Amount;
            document.getElementById('money').innerHTML=Money + "$";
            document.getElementById('updates').innerHTML="You have successfully bought Upgrade 1";
            var calcU1Amount = U1Amount * 5;
            document.getElementById('u1Pr').innerHTML=calcU1Amount;
            resetUpdates();
        }
}
var interval = setInterval(gMoneyU1, 1000);
function gMoneyU1()
{
    var calc = 5 * U1Amount;
    Money += calc;
    document.getElementById('money').innerHTML=Money + "$";
}
function buySG1()
{
    if(Money < 500)
        {
            document.getElementById('updates').innerHTML="You do not have enough money.";
            resetUpdates();
        } else {
            Money -= 500;
            cMoney += 1;
            document.getElementById('MPC').innerHTML=cMoney + "$";
            document.getElementById('money').innerHTML=Money;
        }
}
function resetUpdates()
{
    setTimeout(function(){document.getElementById('updates').innerHTML="";}, 10000);
}
</script>

I'm going to add the localStorage to all info that I want to save, but I'm having problems with the first one so yer. What my code WITH my save-the-persons-info outputs is: http://puu.sh/6iONl.png (and it keeps on in all eternally)

It keeps adding '0' for some reason and I can't figure out why. I'd really appreciate help. Thanks in advance.

Sorry if my code is messy, I'm still learning, hence why asking for help.

Upvotes: 0

Views: 149

Answers (4)

Neil Cresswell
Neil Cresswell

Reputation: 1165

Your if statement will always return false so you'll never get to the "if true" part of your if statement. This is because the local storage value will either be null if not set, or a string value ("0") on most browsers if set, or an integer on some browsers if set. (Most browsers will only maintain strings for local storage, although the HTML5 specs do allow for other values.)

So first, of you would need to change the if part to something like this:

if (localStorage.getItem('money') != null)

I'm not completely sure what you're trying to achieve logic-wise but as mentioned, your other issue is that you're only setting the value to 0 and then reading the value right after (which would be zero still.) This is why you're getting zeros.

Upvotes: 0

Tibos
Tibos

Reputation: 27823

The values in localStorage are all strings. When you do:

localStorage.setItem('x', 0);
var x = localStorage.getItem('x'); // x === '0'
x = x + 1; // x = '01';

the thing you set in local storage will be the value you gave converted to a string. You should parseInt (or convert it some other way back to a number) when you retrieve it from localStorage to avoid this problem.

Upvotes: 0

Bill
Bill

Reputation: 924

Local storage stores everything as a string, so you'll want to call parseInt() on whatever you get back from local storage. Then, you should be able to properly add two ints together, rather than concatenating two strings together.

Upvotes: 0

Andrew Eisenberg
Andrew Eisenberg

Reputation: 28757

The only time that you ever set to localStorage is when you call localStorage.setItem('money', 0);.

You probably want to change that to setting the real value of the money variable.

Upvotes: 2

Related Questions