Отображение 2 случайных чисел с помощью Javascript

#javascript #html

#javascript #HTML

Вопрос:

У меня есть этот код здесь:

 <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>

Это отображает случайное число в диапазоне от 2 до 6 и сохраняет его в кэше пользователя, поэтому, если он перезагрузит страницу, тот же номер появится снова. Но то, что я пытаюсь сделать сейчас, это отобразить второе число, и я пытаюсь это:

 <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>

Но <span id="n2"></span> всегда отображается тот же номер, что и в <span id="n1"></span> . Я предполагаю, что это как-то связано с локальным хранилищем в кэше пользователя. Как заставить его отображать 2 разных числа, но сохранять эти числа в кэше пользователя, чтобы при перезагрузке страницы отображалось то же 2 числа?

Заранее спасибо

Ответ №1:

Вы сохранили оба числа localStorage под одним и тем же ключом ( location.href ), поэтому второе перезаписывает первое.

Вам нужно использовать разные ключи или сохранить числа в словаре JSON и сохранить это вместо этого.

1. Привет, спасибо за ответ! Да, в этом проблема. Но я не могу изменить этот ключ, потому что он сопоставляет его с текущим URL. Таким образом, сгенерированное скриптом число может измениться, если пользователь перейдет на другую страницу, но останется прежним, если он просто перезагрузит страницу. Есть ли какой-либо способ сгенерировать 2 разных числа и сохранить их в localStorage, но сопоставить с URL-адресом страницы?

2. Вы можете просто добавить некоторую известную строку в конец URL-адреса (numberOne и numberTwo или что-то подобное). Таким образом, ключ остается неизменным между посещениями, но отличается для чисел.

3. Большое спасибо! Можете ли вы дать мне какой-нибудь пример кода, основанный на моем?

4. Посмотрите на эту документацию developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /…