How do i save my clicker game Variables with local storage

HTML & CSS
1

I have a clicker game in HTML, CSS, and JS. Im wondering how do I save a variable that has a number value, at the end of a session, (or to keep overwriting the variable as soon as the value changes), so that if you close the clicker game tab, I can open it and my progress will still be there. I would like the code to be a small as possible and easy to understand, so cookies or localStorage would be a good start(I think?).
Much Aprreciated, Antoni

2

Well, either works, so your first choice will be which one you want to use :stuck_out_tongue:

Both of them, generally speaking, are single-line implementations for read or write; if you’re storing multiple bits of data, localStorage is probably a little easier.

3

If i have these variables, how do I use localStorage for it,

window.onload = function() {
  loadGame();
  document.getElementById("showApples").innerText = apples;
  document.getElementById("showApplesPerSecond").innerText = applesPerSecond;
  document.getElementById("showApplesPerClick").innerText = applesPerClick;
  document.getElementById("showiPhoneCost").innerText = iPhoneCost;
  document.getElementById("showiPadCost").innerText = iPadCost;
  document.getElementById("showAirPodsCost").innerText = airPodsCost;
  document.getElementById("showPenCost").innerText = penCost;
  document.getElementById("showMacCost").innerText = macCost;
  document.getElementById("showiMacCost").innerText = iMacCost;
  document.getElementById("showAppleStoreCost").innerText = appleStoreCost;
  document.getElementById("showSteveJobsCost").innerText = steveJobsCost;
  document.getElementById("showiPhones").innerText = iPhones;
  document.getElementById("showiPads").innerText = iPads;
  document.getElementById("showAirPods").innerText = airPods;
  document.getElementById("showPens").innerText = pens;
  document.getElementById("showMacs").innerText = macs;
  document.getElementById("showiMacs").innerText = iMacs;
  document.getElementById("showAppleStores").innerText = appleStores;
  document.getElementById("showSteveJobs").innerText = steveJobs;

}

thanks

4

this is just something i copy and pasted, but the variables are mine

5

the basics of localStorage:

To Write:
localStorage.setItem(key,value)

To Read:
let varname = localStorage.getItem(key);

1 Like
6

note: You can also refer to it as window.localStorage; browsers will interpret localStorage to mean window.localStorage without needing to type it out.

1 Like
7

Thanks so much ive been looking for ages and haven’t gotten anywhere, on any website and you helped me so much :face_holding_back_tears:. Would you know how to overwrite them, so if I’m playing the game, I’m on 150 clicks, and i then close the tab, i can open it later and my progress(with my clicks being 150), will save and open next time i use them?

8

also do i put in the variable name in let varname = localStorage.getItem(key); where (key) is?

9

I use it slightly different.

Initializing and storing key:
localStorage.setItem(“theme”,“default”)

Using (no need for variables IMO):
localStorage.theme

10

Do you know how to over write localStorage.setItem(key,value)

11

Any setItem will overwrite whatever is currently in that key (and create it if it doesnt already exist)

1 Like
12

ok, and if i have a variable that is equal to 0, and I start playing the game and the variable is now equal too 56, how do I overwrite the existing variable equal to zero, and change it too 56? Could you give me an example please?

13

This overwrites the showApples element’s variable “innerText” with the value in apples.

Does that count as an example?

If you mean in localStorage…

localStorage.setItem("key",0)
localStorage.setItem("key",56)
14

yes thank you, so this text mean that local storage overwrites an existing variable, with a variable, which has been updated, yes?

15

localStorage writes to itself.
When you getItem, you can overwrite a local variable, but the value in localStorage does not change until you setItem it again.

16

Nice! How do i find the value of the variable, make that value a new variable, and then store that new variable in localStorage

17

All three of those were answered in post #5.

18

Thanks i didnt realise

19

You can make use of JSON’s stringify and parse to store multiple variables with localStorage.

For example

const clickerGameSettings = {
  apples: 20,
  applesPerSecond: 3,
  applesPerClick: 5
};

// takes an object as an argument e.g. clickerGameSettings
// converts object to a string and stores it with the keyName 'clickerGameSettings'
const storeGameSettings = (settings) => {
  localStorage.setItem('clickerGameSettings', JSON.stringify(settings))
};

// retrieves the string associated with the keyName 'clickerGameSettings'
// and converts it back to an object and returns it
const retrieveGameSettings = () => {
  return JSON.parse(localStorage.getItem('clickerGameSettings'))
};

clickerGameSettings.apples = 25; // making a change

storeGameSettings(clickerGameSettings) // save clickerGameSettings

console.log(retrieveGameSettings()) // retrieve clickerGameSettings and log
/*
{
  "apples": 25,
  "applesPerSecond": 3,
  "applesPerClick": 5
}
*/
20

do i put this code into my game.js file?