javascript - Saving Game Progress to Local Storage -

/* cursor section */  	var cursorlvl = 1;  	function buycursor(){  		var cursorcost = math.floor(25 * math.pow(1.2,cursorlvl));  		if(fuel >= cursorcost)if(ammo >= cursorcost)if(steel >= cursorcost)if(bauxite >= cursorcost)  		{cursorlvl = cursorlvl + 1; fuel = fuel - cursorcost; ammo = ammo - cursorcost; steel = steel - cursorcost; bauxite = bauxite - cursorcost;  		document.getelementbyid('cursorlvl').innerhtml = cursorlvl; document.getelementbyid('fuel').innerhtml = fuel; document.getelementbyid('ammo').innerhtml = ammo; document.getelementbyid('steel').innerhtml = steel; document.getelementbyid('bauxite').innerhtml = bauxite;};  		var nextcost = math.floor(25 * math.pow(1.2,cursorlvl)); document.getelementbyid('cursorcost').innerhtml = nextcost;  		};    /* enemy section */  function changee(){  	var dropdownlist = document.getelementbyid('changeeid');  	var selectedindex = dropdownlist.selectedindex;  	var selectedvalue = dropdownlist.options[selectedindex].value;  	  	var enemydiv = document.getelementbyid('enemyhere');  	switch(selectedvalue){  		case 'eaircraftcarrierdemon':  			enemydiv.innerhtml = '<img src="enemies/aircraftcarrierdemon.png" onclick="fuelclickm();ammoclickm(); steelclickm(); bauxiteclickm()">';  			break;  		case 'eaircraftcarrierprincess':  			enemydiv.innerhtml = '<img src="enemies/aircraftcarrierprincess.png" onclick="fuelclickm(1);ammoclickm(1); steelclickm(1); bauxiteclickm(1)">';  			break;  			}  	};  	  /* flagship section */  function changefs(){  	var dropdownlist = document.getelementbyid('changefsid');  	var selectedindex = dropdownlist.selectedindex;  	var selectedvalue = dropdownlist.options[selectedindex].value;  	  	var fsdiv = document.getelementbyid('imagehere');  	switch(selectedvalue){  		case 'fsabukuma':  			fsdiv.innerhtml = '<img src="ships/abukuma.png">';  			break;  		case 'fsabukuma-d':  			fsdiv.innerhtml = '<img src="ships/abukuma-d.png">';  			break;  			}  };    /* resources section (autoclick) + manual click */  var fuel = 0;  function fuelclicka(number){      fuel = fuel + number;      document.getelementbyid("fuel").innerhtml = fuel;  };  function fuelclickm(){      fuel = fuel + cursorlvl;      document.getelementbyid("fuel").innerhtml = fuel;  };    var ammo = 0;  function ammoclicka(number){      ammo = ammo + number;      document.getelementbyid("ammo").innerhtml = ammo;  };  function ammoclickm(){      ammo = ammo + cursorlvl;      document.getelementbyid("ammo").innerhtml = ammo;  };    var steel = 0;  function steelclicka(number){      steel = steel + number;      document.getelementbyid("steel").innerhtml = steel;  };  function steelclickm(){      steel = steel + cursorlvl;      document.getelementbyid("steel").innerhtml = steel;  };    var bauxite = 0;  function bauxiteclicka(number){      bauxite = bauxite + number;      document.getelementbyid("bauxite").innerhtml = bauxite;  };  function bauxiteclickm(){      bauxite = bauxite + cursorlvl;      document.getelementbyid("bauxite").innerhtml = bauxite;  };    /* buyables section */  /* destroyers section*/  var yukikaze = 0;  function buyyukikaze(){  	var yukikazecost = math.floor(20 * math.pow(1.2,yukikaze));  	if(fuel >= yukikazecost){yukikaze = yukikaze + 1; fuel = fuel - yukikazecost; document.getelementbyid('yukikaze').innerhtml = yukikaze; document.getelementbyid('fuel').innerhtml = fuel;};  	var nextcost = math.floor(20 * math.pow(1.2,yukikaze)); document.getelementbyid('yukikazecost').innerhtml = nextcost;  	};  var shimakaze = 0;  function buyshimakaze(){  	var shimakazecost = math.floor(40 * math.pow(1.2,shimakaze));  	if(fuel >= shimakazecost){shimakaze = shimakaze + 1; fuel = fuel - shimakazecost; document.getelementbyid('shimakaze').innerhtml = shimakaze; document.getelementbyid('fuel').innerhtml = fuel;};  	var nextcost = math.floor(40 * math.pow(1.2,shimakaze)); document.getelementbyid('shimakazecost').innerhtml = nextcost;  	};    /* torpedo cruisers section */  var ooi = 0;  function buyooi(){  	var ooicost = math.floor(25 * math.pow(1.2,ooi));  	if(fuel >= ooicost)if(steel >= ooicost){ooi = ooi + 1; fuel = fuel - ooicost; steel = steel - ooicost;  	document.getelementbyid('ooi').innerhtml = ooi; document.getelementbyid('fuel').innerhtml = fuel; document.getelementbyid('steel').innerhtml = steel;};  	var nextcost = math.floor(25 * math.pow(1.2,ooi)); document.getelementbyid('ooicost').innerhtml = nextcost;  	};  var kitakami = 0;  function buykitakami(){  	var kitakamicost = math.floor(250 * math.pow(1.2,kitakami));  	if(fuel >= kitakamicost)if(steel >= kitakamicost){kitakami = kitakami + 1; fuel = fuel - kitakamicost; steel = steel - kitakamicost;  	document.getelementbyid('kitakami').innerhtml = kitakami; document.getelementbyid('fuel').innerhtml = fuel; document.getelementbyid('steel').innerhtml = steel;};  	var nextcost = math.floor(250 * math.pow(1.2,kitakami)); document.getelementbyid('kitakamicost').innerhtml = nextcost;  	};  	  /* heavy cruisers section */  var furutaka = 0;  function buyfurutaka(){  	var furutakacost = math.floor(50 * math.pow(1.2,furutaka));  	if(ammo >= furutakacost){furutaka = furutaka + 1; ammo = ammo - furutakacost; document.getelementbyid('furutaka').innerhtml = furutaka; document.getelementbyid('ammo').innerhtml = ammo;};  	var nextcost = math.floor(50 * math.pow(1.2,furutaka)); document.getelementbyid('furutakacost').innerhtml = nextcost;  	};  var kako = 0;  function buykako(){  	var kakocost = math.floor(100 * math.pow(1.2,kako));  	if(ammo >= kakocost){kako = kako + 1; ammo = ammo - kakocost; document.getelementbyid('kako').innerhtml = kako; document.getelementbyid('ammo').innerhtml = ammo;};  	var nextcost = math.floor(100 * math.pow(1.2,kako)); document.getelementbyid('kakocost').innerhtml = nextcost;  	};  	  /* aviation cruiser */  var mogami = 0;  function buymogami(){  	var mogamicost = math.floor(75 * math.pow(1.2,mogami));  	if(ammo >= mogamicost)if(bauxite >= mogamicost){mogami = mogami + 1; ammo = ammo - mogamicost; bauxite = bauxite - mogamicost;  	document.getelementbyid('mogami').innerhtml = mogami; document.getelementbyid('ammo').innerhtml = ammo; document.getelementbyid('bauxite').innerhtml = bauxite;};  	var nextcost = math.floor(75 * math.pow(1.2,mogami)); document.getelementbyid('mogamicost').innerhtml = nextcost;  	};  var tone = 0;  function buytone(){  	var tonecost = math.floor(150 * math.pow(1.2,tone));  	if(ammo >= tonecost)if(bauxite >= tonecost){tone = tone + 1; ammo = ammo - tonecost; bauxite = bauxite - tonecost;  	document.getelementbyid('tone').innerhtml = tone; document.getelementbyid('ammo').innerhtml = ammo; document.getelementbyid('bauxite').innerhtml = bauxite;};  	var nextcost = math.floor(150 * math.pow(1.2,tone)); document.getelementbyid('tonecost').innerhtml = nextcost;  	};  	  /* light carrier section */  var houshou = 0;  function buyhoushou(){  	var houshoucost = math.floor(100 * math.pow(1.2,houshou));  	if(bauxite >= houshoucost){houshou = houshou + 1; bauxite = bauxite - houshoucost; document.getelementbyid('houshou').innerhtml = houshou; document.getelementbyid('bauxite').innerhtml = bauxite;};  	var nextcost = math.floor(100 * math.pow(1.2,houshou)); document.getelementbyid('houshoucost').innerhtml = nextcost;  	};  var ryuujou = 0;  function buyryuujou(){  	var ryuujoucost = math.floor(250 * math.pow(1.2,ryuujou));  	if(bauxite >= ryuujoucost){ryuujou = ryuujou + 1; bauxite = bauxite - ryuujoucost; document.getelementbyid('ryuujou').innerhtml = ryuujou; document.getelementbyid('bauxite').innerhtml = bauxite;};  	var nextcost = math.floor(250 * math.pow(1.2,ryuujou)); document.getelementbyid('ryuujoucost').innerhtml = nextcost;  	};  	  /* submarine section */  var i168 = 0;  function buyi168(){  	var i168cost = math.floor(200 * math.pow(1.2,i168));  	if(steel >= i168cost){i168 = i168 + 1; steel = steel - i168cost; document.getelementbyid('i168').innerhtml = i168; document.getelementbyid('steel').innerhtml = steel;};  	var nextcost = math.floor(200 * math.pow(1.2,i168)); document.getelementbyid('i168cost').innerhtml = nextcost;  	};  var maruyu = 0;  function buymaruyu(){  	var maruyucost = math.floor(2000 * math.pow(1.2,maruyu));  	if(steel >= maruyucost){maruyu = maruyu + 1; steel = steel - maruyucost; document.getelementbyid('maruyu').innerhtml = maruyu; document.getelementbyid('steel').innerhtml = steel;};  	var nextcost = math.floor(2000 * math.pow(1.2,maruyu)); document.getelementbyid('maruyucost').innerhtml = nextcost;  	};  	  /* aircraft carrying submarine */  var i19 = 0;  function buyi19(){  	var i19cost = math.floor(150 * math.pow(1.2,i19));  	if(steel >= i19cost)if(bauxite >= i19cost){i19 = i19 + 1; steel = steel - i19cost; bauxite = bauxite - i19cost;  	document.getelementbyid('i19').innerhtml = i19; document.getelementbyid('steel').innerhtml = steel; document.getelementbyid('bauxite').innerhtml = bauxite;};  	var nextcost = math.floor(150 * math.pow(1.2,i19)); document.getelementbyid('i19cost').innerhtml = nextcost;  	};  var i58 = 0;  function buyi58(){  	var i58cost = math.floor(300 * math.pow(1.2,i58));  	if(steel >= i58cost)if(bauxite >= i58cost){i58 = i58 + 1; steel = steel - i58cost; bauxite = bauxite - i58cost;  	document.getelementbyid('i58').innerhtml = i58; document.getelementbyid('steel').innerhtml = steel; document.getelementbyid('bauxite').innerhtml = bauxite;};  	var nextcost = math.floor(300 * math.pow(1.2,i58)); document.getelementbyid('i58cost').innerhtml = nextcost;  	};  	  /* other */  var akashi = 0;  function buyakashi(){  	var akashicost = math.floor(10000 * math.pow(1.2,akashi));  	if(fuel >= akashicost)if(ammo >= akashicost)if(steel >= akashicost)if(bauxite >= akashicost)  	{akashi = akashi + 1; fuel = fuel - akashicost; ammo = ammo - akashicost; steel = steel - akashicost; bauxite = bauxite - akashicost;  	document.getelementbyid('akashi').innerhtml = akashi; document.getelementbyid('fuel').innerhtml = fuel; document.getelementbyid('ammo').innerhtml = ammo; document.getelementbyid('steel').innerhtml = steel; document.getelementbyid('bauxite').innerhtml = bauxite;};  	var nextcost = math.floor(10000 * math.pow(1.2,akashi)); document.getelementbyid('akashicost').innerhtml = nextcost;  	};  var akitsumaru = 0;  function buyakitsumaru(){  	var akitsumarucost = math.floor(100000 * math.pow(1.2,akitsumaru));  	if(fuel >= akitsumarucost)if(ammo >= akitsumarucost)if(steel >= akitsumarucost)if(bauxite >= akitsumarucost)  	{akitsumaru = akitsumaru + 1; fuel = fuel - akitsumarucost; ammo = ammo - akitsumarucost; steel = steel - akitsumarucost; bauxite = bauxite - akitsumarucost;  	document.getelementbyid('akitsumaru').innerhtml = akitsumaru; document.getelementbyid('fuel').innerhtml = fuel; document.getelementbyid('ammo').innerhtml = ammo; document.getelementbyid('steel').innerhtml = steel; document.getelementbyid('bauxite').innerhtml = bauxite;};  	var nextcost = math.floor(100000 * math.pow(1.2,akitsumaru)); document.getelementbyid('akitsumarucost').innerhtml = nextcost;  	};  	  /* other */  window.setinterval(function(){  	  	fuelclicka(  		(yukikaze * 2)  		+ (shimakaze * 4)  		  		+ (ooi * 3)  		+ (kitakami * 15)  	  		+ (akashi * 1000)  		+ (akitsumaru * 100000)  		);  	ammoclicka(  		(furutaka * 5)  		+ (kako * 10)  		  		+ (mogami * 7)  		+ (tone * 14)  		  		+ (akashi * 1000)  		+ (akitsumaru * 100000)  		);  	steelclicka(  		(ooi * 3)  		+ (kitakami * 15)  		  		+ (i168 * 20)  		+ (maruyu * 200)  		  		+ (i19 * 15)  		+ (i58 * 30)  		  		+ (akashi * 1000)  		+ (akitsumaru * 100000)  		);  	bauxiteclicka(  		(mogami * 7)  		+ (tone * 14)  		  		+ (houshou * 10)  		+ (ryuujou * 20)  		  		+ (i19 * 15)  		+ (i58 * 30)  		  		+ (akashi * 1000)  		+ (akitsumaru * 100000)  		);  		  }, 1000);

<body>  	<nav>  	<img src="iconammo.png"></img><span id="ammo">0</span>  	<img src="iconfuel.png"></img><span id="fuel">0</span>  	<img src="iconsteel.png"></img><span id="steel">0</span>  	<img src="iconbauxite.png"></img><span id="bauxite">0</span>  	</nav>  	  	<section>  	enemy  	<select id="changeeid" onclick="javascript:changee();">  		<option value="eaircraftcarrierdemon">aircraft carrier demon</option>  		<option value="eaircraftcarrierprincess">aircraft carrier princess</option>  		</select>  	<div id="enemyhere">  	</div>  	</section>  	  	<article>  	<div id="tablewrapper"><div id="tablescroll">    	<a id="buttonnonship" href="#" class="button14">non-ship</a>  	<p id="nonship">  	cursor level: <span id="cursorlvl">0</span> cost: <span id="cursorcost">10</span>  	<br><button onclick="buycursor()">upgrade cursor</button>  	</p><br>  	  	<a id="buttondd" href="#" class="button2">dd</a>  	<p id="dd">  	  	yukikaze: <span id="yukikaze">0</span> cost: <span id="yukikazecost">20</span> adds: 2 <img src="iconfuel.png"></img>  	<br><button onclick="buyyukikaze()">buy yukikaze</button><br>  	shimakaze: <span id="shimakaze">0</span> cost: <span id="shimakazecost">40</span> adds: 4 <img src="iconfuel.png"></img>  	<br><button onclick="buyshimakaze()">buy shimakaze</button><br>  	  	</p>  	  	<a id="buttonclt" href="#" class="button4">clt</a>  	<p id="clt">  	  	ooi: <span id="ooi">0</span> cost: <span id="ooicost">25</span> adds: 3 <img src="iconfuel.png"> <img src="iconsteel.png"></img>  	<br><button onclick="buyooi()">buy ooi</button><br>  	kitakami: <span id="kitakami">0</span> cost: <span id="kitakamicost">250</span> adds: 15 <img src="iconfuel.png"> <img src="iconsteel.png"></img>  	<br><button onclick="buykitakami()">buy kitakami</button><br>  	  	</p>  	  	<a id="buttonca" href="#" class="button5">ca</a>  	<p id="ca">  	  	furutaka: <span id="furutaka">0</span> cost: <span id="furutakacost">50</span> adds: 5 <img src="iconammo.png"></img>  	<br><button onclick="buyfurutaka()">buy furutaka</button><br>  	kako: <span id="kako">0</span> cost: <span id="kakocost">100</span> adds: 10 <img src="iconammo.png"></img>  	<br><button onclick="buykako()">buy kako</button><br>  	  	</p>  	  	<a id="buttoncav" href="#" class="button6">cav</a>  	<p id="cav">  	  	mogami: <span id="mogami">0</span> cost: <span id="mogamicost">75</span> adds: 7 <img src="iconammo.png"></img> <img src="iconbauxite.png"></img>  	<br><button onclick="buymogami()">buy moganmi</button><br>  	tone: <span id="tone">0</span> cost: <span id="tonecost">150</span> adds: 14 <img src="iconammo.png"></img> <img src="iconbauxite.png"></img>  	<br><button onclick="buytone()">buy tone</button><br>  	  	</p>  	  	<a id="buttoncvl" href="#" class="button9">cvl/av</a>  	<p id="cvl">  	  	houshou: <span id="houshou">0</span> cost: <span id="houshoucost">100</span> adds: 10 <img src="iconbauxite.png"></img>  	<br><button onclick="buyhoushou()">buy houshou</button><br>  	ryuujou: <span id="ryuujou">0</span> cost: <span id="ryuujoucost">250</span> adds: 20 <img src="iconbauxite.png"></img>  	<br><button onclick="buyryuujou()">buy ryuujou</button><br>  	  	</p>  	  	<a id="buttonss" href="#" class="button11">ss</a>  	<p id="ss">  	  	i-168: <span id="i168">0</span> cost: <span id="i168cost">200</span> adds: 20 <img src="iconsteel.png"></img>  	<br><button onclick="buyi168()">buy i-168</button><br>  	maruyu: <span id="maruyu">0</span> cost: <span id="maruyucost">2000</span> adds: 200 <img src="iconsteel.png"></img>  	<br><button onclick="buymaruyu()">buy maruyu</button><br>  	  	</p>  	  	<a id="buttonssv" href="#" class="button12">ssv</a>  	<p id="ssv">  	  	i-19: <span id="i19">0</span> cost: <span id="i19cost">150</span> adds: 15 <img src="iconsteel.png"></img> <img src="iconbauxite.png"></img>  	<br><button onclick="buyi19()">buy i-19</button><br>  	i-58: <span id="i58">0</span> cost: <span id="i58cost">300</span> adds: 30 <img src="iconsteel.png"></img> <img src="iconbauxite.png"></img>  	<br><button onclick="buyi58()">buy i-58</button><br>  	  	</p>  	  	<a id="buttonetcship" href="#" class="button13">etc ships</a>  	<p id="etc">  	  	akashi: <span id="akashi">0</span> cost: <span id="akashicost">10000</span> adds: 1000 <img src="iconammo.png"></img> <img src="iconfuel.png"></img> <img src="iconsteel.png"></img> <img src="iconbauxite.png"></img>  	<br><button onclick="buyakashi()">buy akashi</button><br>  	akitsu maru: <span id="akitsumaru">0</span> cost: <span id="akitsumarucost">100000</span> adds: 10000 <img src="iconammo.png"></img> <img src="iconfuel.png"></img> <img src="iconsteel.png"></img> <img src="iconbauxite.png"></img>  	<br><button onclick="buyakitsumaru()">buy akitsu maru</button><br>  	  	</p>  	  	</div></div>  	</article>  	</body>

i'm making game using html, css, jquery , javascript.

it's clicker game, it's little complex lot of information.
i want game autosave progress local storage, , want option can click button , wipe saved progress , start on if wish. (i intend implement ability reset values start on bonuses, heavenly chips in cookie clicker game.)

i've been through tons of tutorials , messed around js , html bunch won't work , don't understand i'm doing. there's on 5k lines of code i'm hoping won't have post here.

the other answers question on here didn't seem specific situation because didn't help. assistance appreciated!

thank you! c:

edit: have included relevant parts of code, though trimmed down quite bit. didn't add css or jquery because website said much. don't think can run in form, this'll help.

the question generic have specific answer. adding values local storage, first check if supported browser.

if(typeof(storage) !== "undefined") {     // code localstorage } else {     // no web storage support.. } 

then proceed save scores/levels/bonuses in local storage.

// store localstorage.setitem("score", "1000"); // retrieve var score = localstorage.getitem("score"); 

to remove/delete score value completely,

localstorage.removeitem("score"); 

for resetting value,

localstorage.setitem("score", "0"); 

still need specific cases in order give detailed answer.