How to store data in localstorage and retreive it on launch JS

Question

I am writing a cookie clicker game in html and am trying to make it so that your data doesnt get reset if you close the tab, browser, or refresh the page. it is currently stored in variables at the top of the script.

    var clicks = 0;
    var cpc = 1 ;
    var autoc = 0;
    var cpcCost = 1;
    var autocCost = 1000;
    var upgradecookiecost = 50000;
    var currentcookie = 0;
    var cookiemultiplier = 1;

these are the variables i have, and they get changed throughout the code. i have read about local storage in javascript, but i havent found an example which helps me with this

(the js code):

    var clicks = 0;
    var cpc = 1 ;
    var autoc = 0;
    var cpcCost = 1;
    var autocCost = 1000;
    var upgradecookiecost = 50000;
    var currentcookie = 0;
    var cookiemultiplier = 1;
    localStorage.clicks = clicks;
    localStorage.cpc = cpc;
    localStorage.autoc = autoc;
    localStorage.cpcCost = cpcCost;
    localStorage.autocCost = autocCost;
    localStorage.upgradecookiecost = upgradecookiecost;
    localStorage.currentcookie = currentcookie;
    localStorage.cookiemultiplier = cookiemultiplier;


    const cookies = ["https://purepng.com/public/uploads/large/purepng.com-cookiescookiessnacksbaked-snacksflour-cookieschocolate-cookies-1411527249039ulhcg.png", "https://www.pngmart.com/files/16/Dark-Chocolate-Cookie-PNG-Photos.png", "https://www.nicepng.com/png/full/549-5494003_image-transparent-download-m-cookie-png-chocolate-cookie.png", "https://www.iheartnaptime.net/wp-content/uploads/2022/10/Chocolate-mm-cookies-I-Heart-Naptime-6-857x1200.jpg", "https://www.pngarts.com/files/4/Oreo-PNG-Image-Background.png", "https://cdn.freewebstore.com/origin/1978/mrsfieldswhitechunkmacadamiacookies60gsinglecookiepack1.png", "https://www.kindpng.com/picc/m/233-2338295_red-velvet-cookie-png-transparent-png.png", "https://www.cakepicturegallery.com/d/1735337-1/Picture+of+gingerbread+man+cookies.PNG", "https://c8.alamy.com/comp/D5DF4B/a-mcvities-original-digestive-biscuit-on-a-white-background-D5DF4B.jpg"]
    function onClick(){
        clicks += (cpc*cookiemultiplier);
        document.getElementById("clicks").innerHTML = clicks;
    
    };
    function purchaceCPC(){
        if (cpcCost<=clicks){        
        cpc += 1;
        clicks -= cpcCost;
        cpcCost *= 5;
        document.getElementById("CPC-Counter").innerHTML = cpc;
        document.getElementById("cpc-Cost").innerHTML = cpcCost;
        document.getElementById("clicks").innerHTML = clicks;
        };
    };
    function purchaceAutoc(){
        if (autocCost<=clicks){
            autoc += 1;
            clicks -= autocCost;
            autocCost *= 2;
            document.getElementById("autoc-Counter").innerHTML = autoc;
            document.getElementById("clicks").innerHTML = clicks;
            document.getElementById("Autoc-Cost").innerHTML = autocCost;
        };
    };

    function autoclick(){   
        clicks += ((cpc*cookiemultiplier)*autoc);
        document.getElementById("clicks").innerHTML = clicks;
    };
    function autoclickfunc(){
        setInterval(function() {autoclick()},  1000);
        
    }
    function upgradecookie(){
        if (clicks >= upgradecookiecost){
            currentcookie += 1;
            clicks = 0;
            autoclicks = 0;
            cookiemultiplier *= 15;
            upgradecookiecost *= 15;
            document.getElementById("cookie-img").src = cookies[currentcookie]
            document.getElementById("cookie-multiplier").innerHTML = cookiemultiplier;
            document.getElementById("Cookie-Upgrade-Cost").innerHTML = upgradecookiecost;
        }
    }

I am quite new to javascript so this may not be the best way to write it all.

Answer 1

Try this

const values={
clicks : 0,
cpc : 1 ,
autoc : 0,
cpcCost : 1,
autocCost : 1000,
upgradecookiecost : 50000,
currentcookie : 0,
cookiemultiplier : 1
}

// to set item in local storage
localStorage.setItem("myitem",values );

// to get item from local storage
localStorage.getItem("myitem");

// and if you want to store individual key value pair in place of object,
//then repeat the below code for every key value pair example
var clicks = 0;
localStorage.setItem("clicks",clicks );
localStorage.getItem("clicks");

Refer this

Hope this helps.