localStorage in Javascript

Question

I'm trying to create javascript that calculates profits. I basicly have a HTML button that adds the number 100 to a table each time you press the button, then you it automaticly calculats the profit you've made with some other variables such as price and cost. What I'm trying to make it do right now is to save the amount of sharks(the resouce that I'm using on the table)so if I refresh the website the number is still there. I've used the localStorage but have not succeded. This is the code that I currently have.

var shark = [localStorage.getItem('amountShark'), 993, 0, 993]




function addSharks()
{

    var sharkstoadd = 100;
    shark[0] += 100;
    shark[3] = shark[0] * (shark[1] - shark[2])
    document.getElementById("sharkAmount").innerHTML = shark[0];
    document.getElementById("sharkPrice").innerHTML = shark[1];
    document.getElementById("sharkCost").innerHTML = shark[2];
    document.getElementById("sharkProfit").innerHTML = shark[3];
    localStorage.setItem('amountShark', shark[0]);

}

The problem that I get is the data saved is strings and not numbers so if I want to add 100 to the localstorage I't is added like this 100 + 100 = 100100 not like this 100 + 100 = 200. If i dont use localStorage.getItem('amountShark') in the array/shark[0] the data is added in the correct way. As I said before I belive that is because the data is stored as strings. Im wondering if there is a way to get around this, the end goal is to display a number on the screen and when refreshing the site the number is still there, I also need to be able to add 100 with a press of a button that is on the website, and this also needs to be saved when refreshing.

Edit:

Fixed it by doing this and adding the parseInt

var shark = [parseInt(localStorage.amountShark, 10), 993, 0, 993]




function addSharks()
{

    var sharkstoadd = 100;
    shark[0] += 100;
    shark[3] = shark[0] * (shark[1] - shark[2])
    document.getElementById("sharkAmount").innerHTML = shark[0];
    document.getElementById("sharkPrice").innerHTML = shark[1];
    document.getElementById("sharkCost").innerHTML = shark[2];
    document.getElementById("sharkProfit").innerHTML = shark[3];
    localStorage.setItem('amountShark', shark[0]);

}

The only thing now is that when updating the browser the number does not show untill i add another hundred.

edit 2:

Figured out how to fix that while typing the first edit dont know if this is the best way to write it but it works so it's a win :)

var shark = [parseInt(localStorage.amountShark, 10), 993, 0, 993]


document.getElementById("sharkAmount").innerHTML = shark[0];
shark[3] = shark[0] * (shark[1] - shark[2])
document.getElementById("sharkProfit").innerHTML = shark[3];

function addSharks()
{

    var sharkstoadd = 100;
    shark[0] += 100;
    shark[3] = shark[0] * (shark[1] - shark[2])
    document.getElementById("sharkAmount").innerHTML = shark[0];
    document.getElementById("sharkPrice").innerHTML = shark[1];
    document.getElementById("sharkCost").innerHTML = shark[2];
    document.getElementById("sharkProfit").innerHTML = shark[3];
    localStorage.setItem('amountShark', shark[0]);

}

Thanks for the help :)

So convert the strings to numbers? That's a simple search on any search engine? — gforce301, Jul 19 '18 at 00:57

Vikasdeep Singh · Answer 1 · 2018-07-19T01:09:54.250

1

use parseInt() to convert strings to numbers. Currently you have strings wihich are appending.

Current is:

function addSharks()
{

    var sharkstoadd = 100;
    shark[0] += 100;
    shark[3] = shark[0] * (shark[1] - shark[2])
    document.getElementById("sharkAmount").innerHTML = shark[0];
    document.getElementById("sharkPrice").innerHTML = shark[1];
    document.getElementById("sharkCost").innerHTML = shark[2];
    document.getElementById("sharkProfit").innerHTML = shark[3];
    localStorage.setItem('amountShark', shark[0]);

}

Change to:

function addSharks()
    {

        var sharkstoadd = 100;
        shark[0] = parseInt(shark[0]) + 100;
        shark[3] = parseInt(shark[0]) * parseInt((shark[1]) - parseInt(shark[2]))
        document.getElementById("sharkAmount").innerHTML = shark[0];
        document.getElementById("sharkPrice").innerHTML = shark[1];
        document.getElementById("sharkCost").innerHTML = shark[2];
        document.getElementById("sharkProfit").innerHTML = shark[3];
        localStorage.setItem('amountShark', shark[0]);

    }

edited Jul 19 '18 at 01:09

answered Jul 19 '18 at 01:00

Vikasdeep Singh

20,983
15
78
104

I'm unclear how parsing the integer 100 back into an integer is going to solve his problem Vic. – gforce301 Jul 19 '18 at 01:03
Again, the problem is not the integer 100. The problem is that `shark[0]` is a **string** I think you should change it to `shark[0] = parseInt(shark[0]) + 100;` – gforce301 Jul 19 '18 at 01:07
@gforce301 you are right. Silly mistake. Updated now. Please have a look. – Vikasdeep Singh Jul 19 '18 at 01:09
1

Now that's an answer! – gforce301 Jul 19 '18 at 01:11

localStorage in Javascript

1 Answers1