Display 2 random numbers with Javascript

Question

I have this code here:

<script>
            const stored = localStorage[location.href]
            const number = stored || Math.floor(Math.random() * 6) + 2

            document.getElementById("n1").innerHTML = number

            if ( !stored ) localStorage[location.href] = number
</script>

<div>
 The first number is <span id="n1"></span>.
</div>

That displays a random number between 2~6 and that saves that to the user's cache, so if he reloads the page the same number will appear again. But what I am trying to do now is to display a second number, and I am trying this:

<script>
            const stored2 = localStorage[location.href]
            const number2 = stored2 || Math.floor(Math.random() * 8) + 3

            document.getElementById("n2").innerHTML = number2

            if ( !stored2 ) localStorage[location.href] = number2
</script>

<div>
     The second number is <span id="n2"></span>.
 </div>

But the <span id="n2"></span> is display always the same number as in <span id="n1"></span>. I guess it has something to do with the local storage in the user's cache. How make it display 2 different numbers but keep storing those numbers in the user's cache so if he reloads the page the same 2 number would be displayed?

Thanks in advance

localStorage[location.href] <-- so you use same thing and wonder why is the same? — epascarello
– epascarello, Commented Apr 10, 2019 at 23:54

Matt · Accepted Answer · 2019-04-10 23:43:21Z

4

You’ve stored both numbers in localStorage under the same key (location.href) so the second one is overwriting the first.

You need to use different keys or store the numbers in a JSON dictionary and store that instead.

answered Apr 10, 2019 at 23:43

Matt

2,2731 gold badge17 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Batman Over a year ago

Hey, thanks for the reply! Yea, that's the problem. But I can't change that key because it's mapping it to the current URL. So the generated number by the script can change if the user goes to a different page but will keep the same if he just reloads the page. Is there any way to generate 2 different numbers and store it in localStorage but mapped by the page URL?

Matt Over a year ago

You can just append some known string to the end of the url (numberOne and numberTwo or something similar). That way the key stays the same between visits but is different for the numbers.

Batman Over a year ago

Thanks a lot! Can you give me some example code based on mine?

Matt Over a year ago

Look at this documentation developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

Display 2 random numbers with Javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related