Javascript storing a number for later use with web storage

Question

I am making a page that requires displaying and saving user input

I have these variables

var hotdogs = 0;
var bread = 0;
var hotdog = 0;
var sauce = 0;
var bakeries = 0;
var butchers = 0;
var sauceries = 0;

I have attempeted to create a save button with this, though the loading works, I am unable to use them in very basic math. Also these number after being in a math problem are then displayed on page.

When I use this code the numbers load, but when I add 1 to the numbers it adds 1 onto the end not increases by one.

if(typeof(Storage)!=="undefined") {
        var hotdogs = localStorage.getItem("hotdogs");
        var bread = localStorage.getItem("bread");
        var hotdog = localStorage.getItem("hotdog");
        var sauce = localStorage.getItem("sauce");
        var bakeries = localStorage.getItem("bakeries");
        var butchers = localStorage.getItem("butchers");
        var sauceries = localStorage.getItem("sauceries");
    }
    else {
        var hotdogs = 0;
        var bread = 0;
        var hotdog = 0;
        var sauce = 0;
        var bakeries = 0;
        var butchers = 0;
        var sauceries = 0;
    }

    var auto = 1;
    var automake = 0;
    var one = 1;

    function save () {
        localStorage.setItem("bread", bread);
        localStorage.setItem("hotdog", hotdog);
        localStorage.setItem("sauce", sauce);
        localStorage.setItem("hotdogs", hotdogs);
        localStorage.setItem("bakeries", bakeries);
        localStorage.setItem("butchers", butchers);
        localStorage.setItem("sauceries", sauceries);
    }

Answer 1

Storage items are always stored as strings. This is why you must JSON.stringify objects before storing them, for example.

For this reason, + means concatenate, not add. If you want to retrieve an integer, you must parseInt(item, 10) it.