Как передать данные с одной страницы на другую с помощью js?

Question

[zeaovede]

Со страницы 1 нужно передать текст чего-то там. В конкретном моем случае, это наименование игры.

<span class="badge bg-pale-blue text-blue rounded py-1 mb-2">League of Legends</span>

Пример кода со страницы 1

<div class="row gy-6">
<div class="col-md-6 col-lg-4">
<a href="/apply/" class="card shadow-lg lift h-100">
<div class="card-body p-5 d-flex flex-row">
<div>
<img alt="LoL Boosting" class="avatar w-11 h-11 fs-20 me-4" src="<?php echo get_template_directory_uri(); ?>/assets/img/svg/lol.svg">
</div>
<div>
<span class="badge bg-pale-blue text-blue rounded py-1 mb-2">League of Legends</span>
<h4 class="mb-1">Бустер - Тренер</h4>
<p class="mb-0 text-body">Мастер или выше</p>
</div>
</div>
</a>
</div>
<div class="col-md-6 col-lg-4">
<a href="/apply/" class="card shadow-lg lift h-100">
<div class="card-body p-5 d-flex flex-row">
<div>
<img alt="Val Boosting" class="avatar w-11 h-11 fs-20 me-4" src="<?php echo get_template_directory_uri(); ?>/assets/img/svg/val.svg">
</div>
<div>
<span class="badge bg-pale-red text-red rounded py-1 mb-2">Valorant</span>
<h4 class="mb-1">Бустер - Тренер</h4>
<p class="mb-0 text-body">Радиант или выше</p>
</div>
</div>
</a>
</div>

Как правильно записать js код на странице 1 для этого, и что записать на странице 2 в месте вывода?

Comments

[Михаил Р.]

Как правильно записать js код на странице 1 для этого, и что записать на странице 2 в месте вывода?

Показывайте Ваши попытки. Подсказка, использовать локальное хранилище браузера.

Answer 1

[Сергей delphinpro]

Как правильно записать js код на странице 1 для этого

Js как бы и не нужен

<a href="/apply/?game=League+of+Legends" class="card shadow-lg lift h-100">

что записать на странице 2 в месте вывода

console.log(window.location)

Comments

[zeaovede]

Добрый день. Я попробовал применить ваше решение. Но оно почему то не сработало.
На странице 1 применил ваш код

<a href="/apply/?game=League+of+Legends" class="card shadow-lg lift h-100">

На странице 2 в месте вывода вставил ваш код

<h1 class=""><script>console.log(window.location)</script></h1>

[Pavstyuk]

Попробуйте начать решать этот вопрос с изучения основ JS - очень увлекательно.
Вот пример, как делать не нужно, но это будет работать.

<script>
    let game = window.location.search.split("=")[1].replaceAll('+', ' ');
    document.querySelector('h1').innerText = game;
</script>

[zeaovede]

Pavstyuk, Классное решение, спасибо за труд. К сожалению необучаемый. Так бы с радостью. Для меня это точки, запятые, просто какие-то символы, кавычки и не более чем. А чтобы все научиться понимать, что куда, зачем и почему, когда именно. Тут уже мозг нужен. Не всем дано понимать такие вещи

[Сергей delphinpro]

Тут уже мозг нужен. Не всем дано понимать такие вещи

Первый раз вижу человека, признающего, что у него нет мозга... Извините.

[Сергей delphinpro]

zeaovede,

Но оно почему то не сработало.

Смотря что вы понимаете под этим словосочетанием "не сработало"
Если посмотреть в консоль, то вы там увидите объект location, который содержит в себе строку параметров запроса, из которой вы можете достать необходимое вам значение.

[zeaovede]

Сергей delphinpro, эта тема примерно на час за кружкой пива. Если в двух словах, то у каждого человека есть свой предел, будь то это какая-то физическая активность или умственная. Итог такой, что выше потолка не прыгнешь. А вот высота этого потолка ограничивается возможностями самого человека. Многие неспособны признать свое слабое место, готовы обманывать cебя и других, это правда.

Answer 2

[zeaovede]

Не могу сказать на сколько это решение грамотное с точки конкретного места использования, плюс, возможны какие-то недочеты в коде. (делал по видео с ютуба).
У меня сработало такое решение
Страница 1

<a id="Lol" href="/apply/" class="card shadow-lg lift h-100">

<script>document.getElementById('Lol').onclick = function () {
 localStorage.setItem('game', "League of Legends");
 }
 </script>

Страница 2

<h1 id="game" ></h1>

<script>
    let game = localStorage.getItem('game');
    let job = document.getElementById('game')
    
    window.onload = function() {
    if(game == null){
        job.innerHTML;
    }
    else {
        job.innerHTML = game;
    }
    }
</script>