Как изменить txtcontent с другой страницы?

Question

[Антон Богдашов]

Пишу тренажер для слепой печати. У меня есть стартовая страница, на которой есть кнопки с выбором уровня сложности(скрипты привязанные к этим кнопкам имеют значения с текстом) и есть другая страница, на которой сам тренажер.
Так вот, я уже месяц не могу понять как сделать так, чтобы при нажатии на кнопки на стартовой странице, они передавали эти значения в тренажер, тот его принимал в txtcontent своего дисплея и отображал его. Пробовал и экспорты и промисы и т.д.
Я бы приложил кусок кода, но я даже не знаю какой именно из накиданных мной вариантов. НЕ один из них не работает даже близко.
Пишу все на ванильном js

Answer 1

[Dastan_UI]

Все просто, работай через events

[start page]

const childWindow = window.open('/training');
const onChangeTxtContent = (txt) => {
     if (childWindow.closed) {
         //train window closed
         return;
     }
     const event = new CustomEvent('txt-content', {detail: {txt}});
     childWindow.dispatchEvent(event);
}

[training]

window.addEventListener('txt-content', ({detail})=>{
   console.log(detail?.txt) // here is txt from parent (start) page
})

В customEvent в detail помимо txt можно пихнуть все что угодно

Comments

[Dastan_UI]

так же можно и использовать localStorage;

при изменении любого ключа сработает event 'storage'. Ее можно уловить на всех страницах

[Антон Богдашов]

Dastan_UI, Спасибо большое