How can I use local storage to make my browser remember some variables?

[warren75]

I'm building a basic stock storing app

its working the way i want but when i close my browser and relaunch it everything is reset to 10
i would like the browser to remember the number regardless of how many times its opened and closed.

The variables i would like to keep track of are:
posbanks
msrs
cashdrawers
t20s
u220s

any help appreciated

here is the code so far:

var posbanks = document.getElementById("posbank-counter").innerHTML;
var msrs = document.getElementById("MSR-counter").innerHTML;
var cashdrawers = document.getElementById("cashdrawer-counter").innerHTML;
var t20s = document.getElementById("t20-counter").innerHTML;
var u220s = document.getElementById("U220-counter").innerHTML;

 /*subtract posbanks*/
document.getElementById("posbank-button").onclick = function () {
    if (posbanks > 0) {
        posbanks --;
        document.getElementById("posbank-counter").innerHTML = posbanks;
        if (posbanks <= 3) {
            document.getElementById("posbank-lowstock").innerHTML = "low Stock!";
            document.getElementById("posbank-counter").style.color = "orange";
        }
        if (posbanks == 0) {
            document.getElementById("posbank-lowstock").innerHTML = "No stock left!!!";
            document.getElementById("posbank-counter").style.color = "red";
        }
    }
}

/*add posbanks*/
document.getElementById("posbank-button-add").onclick = function () {
    posbanks ++;
    document.getElementById("posbank-counter").innerHTML = posbanks;
    if (posbanks == 0) {
        document.getElementById("posbank-lowstock").innerHTML = "No stock left!!!";
        document.getElementById("posbank-counter").style.color = "red";
    }

    if (posbanks > 0) {
        document.getElementById("posbank-lowstock").innerHTML = "low Stock!";
        document.getElementById("posbank-counter").style.color = "orange";
    }

    if (posbanks > 3) {
        document.getElementById("posbank-lowstock").innerHTML = "";
        document.getElementById("posbank-counter").style.color = "black";
    }
}

/*subtract MSRS */
document.getElementById("MSR-button").onclick = function () {
    if (msrs > 0) {
        msrs --;
        document.getElementById("MSR-counter").innerHTML = msrs;
        if (msrs <= 3) {
            document.getElementById("MSR-lowstock").innerHTML = "low Stock!";
            document.getElementById("MSR-counter").style.color = "orange";
        }
        if (msrs == 0) {
            document.getElementById("MSR-lowstock").innerHTML = "No stock left!!!";
            document.getElementById("MSR-counter").style.color = "red";
        }
    }
}

/*add MSR*/
document.getElementById("MSR-button-add").onclick = function () {
    msrs ++;
    document.getElementById("MSR-counter").innerHTML = msrs;
    if (msrs == 0) {
        document.getElementById("MSR-lowstock").innerHTML = "No stock left!!!";
        document.getElementById("MSR-counter").style.color = "red";
    }

    if (msrs > 0) {
        document.getElementById("MSR-lowstock").innerHTML = "low Stock!";
        document.getElementById("MSR-counter").style.color = "orange";
    }

    if (msrs > 3) {
        document.getElementById("MSR-lowstock").innerHTML = "";
        document.getElementById("MSR-counter").style.color = "black";
    }
}

/*subtract cash drawers */
document.getElementById("cashdrawer-button").onclick = function () {
    if (cashdrawers > 0) {
        cashdrawers --;
        document.getElementById("cashdrawer-counter").innerHTML = cashdrawers;
        if (cashdrawers <= 3) {
            document.getElementById("cashdrawer-lowstock").innerHTML = "low Stock!";
            document.getElementById("cashdrawer-counter").style.color = "orange";
        }
        if (cashdrawers == 0) {
            document.getElementById("cashdrawer-lowstock").innerHTML = "No stock left!!!";
            document.getElementById("cashdrawer-counter").style.color = "red";
        }
    }
}

/*add cash drawers*/
document.getElementById("cashdrawer-button-add").onclick = function () {
    cashdrawers ++;
    document.getElementById("cashdrawer-counter").innerHTML = cashdrawers;
    if (cashdrawers == 0) {
        document.getElementById("cashdrawer-lowstock").innerHTML = "No stock left!!!";
        document.getElementById("cashdrawer-counter").style.color = "red";
    }

    if (cashdrawers > 0) {
        document.getElementById("cashdrawer-lowstock").innerHTML = "low Stock!";
        document.getElementById("cashdrawer-counter").style.color = "orange";
    }

    if (cashdrawers > 3) {
        document.getElementById("cashdrawer-lowstock").innerHTML = "";
        document.getElementById("cashdrawer-counter").style.color = "black";
    }
}

/*subtract T20s */
document.getElementById("t20-button").onclick = function () {
    if (t20s > 0) {
        t20s --;
        document.getElementById("t20-counter").innerHTML = t20s;
        if (t20s <= 3) {
            document.getElementById("t20-lowstock").innerHTML = "low Stock!";
            document.getElementById("t20-counter").style.color = "orange";
        }
        if (t20s == 0) {
            document.getElementById("t20-lowstock").innerHTML = "No stock left!!!";
            document.getElementById("t20-counter").style.color = "red";
        }
    }
}

/*Add T20s */
document.getElementById("t20-button-add").onclick = function () {
    t20s ++;
    document.getElementById("t20-counter").innerHTML = t20s;
    if (t20s == 0) {
        document.getElementById("t20-lowstock").innerHTML = "No stock left!!!";
        document.getElementById("t20-counter").style.color = "red";
    }

    if (t20s > 0) {
        document.getElementById("t20-lowstock").innerHTML = "low Stock!";
        document.getElementById("t20-counter").style.color = "orange";
    }

    if (t20s > 3) {
        document.getElementById("t20-lowstock").innerHTML = "";
        document.getElementById("t20-counter").style.color = "black";
    }
}

/*Subtract U220s */
document.getElementById("u220-button").onclick = function () {
    if (u220s > 0) {
        u220s --;
        document.getElementById("U220-counter").innerHTML = u220s;
        if (u220s <= 3) {
            document.getElementById("u220-lowstock").innerHTML = "low Stock!";
            document.getElementById("U220-counter").style.color = "orange";
        }
        if (u220s == 0) {
            document.getElementById("u220-lowstock").innerHTML = "No stock left!!!";
            document.getElementById("U220-counter").style.color = "red";
        }
    }
}

/*Add U220s */
document.getElementById("u220-button-add").onclick = function () {
    u220s ++;
    document.getElementById("U220-counter").innerHTML = u220s;
    if (u220s == 0) {
        document.getElementById("u220-lowstock").innerHTML = "No stock left!!!";
        document.getElementById("U220-counter").style.color = "red";
    }

    if (u220s > 0) {
        document.getElementById("u220-lowstock").innerHTML = "low Stock!";
        document.getElementById("U220-counter").style.color = "orange";
    }

    if (u220s > 3) {
        document.getElementById("u220-lowstock").innerHTML = "";
        document.getElementById("U220-counter").style.color = "black";
    }
}

 

[warren75]

heeeeelp, please