Сохранение ввода текста в отдельные файлы js

Я пытаюсь создать веб-приложение для викторины с помощью javascript, и я застрял. Есть 2 файла HTML, один как starter.html и один как index.html. У меня есть ввод в моем начальном файле, который принимает имя пользователя, который я хочу отобразить позже на индексном сайте, например:

alert(`Congrats ${playerName} you got all the questions right!`)

и ссылка «отправить», которая ведет вас на следующий сайт и сохраняет такую ​​​​переменную:

<input type="text" id="username" placeholder="Enter your name"/>
<a id="startGame" href="index.html">Start Game</a>

const inputArea = document.querySelector("#username");
const startButton = document.querySelector("#startGame");

var saveUsername = function () {
  var playerName = inputArea.value;
};

Как я могу получить доступ к переменной playerName из index.html? Во-первых, я намеревался использовать глобальный файл js, но я пропускаю некоторые объявленные элементы, так как у меня есть два отдельных файла html, и он не находит элементы во время манипуляции с DOM (не может прочитать свойства null). Я попытался использовать два отдельных файла js, но не смог найти решение для доступа к данным из файла javascript и сохранения их во втором.

Любые идеи?

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
0
32
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать localStorage для этой цели. Когда пользователь вводит свое имя в текстовое поле, вы можете сохранить значение в localStorgae и получить значение на странице индекса.

const usernameInputField = document.querySelector('#username'),
  button = document.querySelector('button');

button.addEventListener('click', () => {
  if (usernameInputField.value != "") {
    localStorage.setItem('user', usernameInputField.value);
  }
  alert('Username Saved Successfully. Starting the game...');
})
<input type="text" id="username" placeholder="Enter your name" />
<button>Start Game</button>

и чтобы вернуть значение, просто используйте

if(localStorage.getItem != null && localStorage.getItem('user') != "") {
   console.log(localStorage.getItem('user'));
   // here you can set the name as innerText of some element
}

Вы можете проверить это здесь https://jsfiddle.net/za01kp46/

Большое спасибо! В настоящее время я прохожу курс JS где-то 30 часов, но я не знал о localStorage. Тем не менее, это решило мою проблему, еще раз спасибо.

deannyboy 09.04.2022 20:57

вы также можете сделать что-то вроде href="index.html?user=john", а затем использовать searchParams, чтобы получить имя пользователя. Но это не рекомендуется, так как значение можно легко изменить.

Joy Dey 09.04.2022 21:02

Другие вопросы по теме