Сохранить входное значение в локальном хранилище и получить его на другой странице - PullRequest
Новая
       8

Сохранить входное значение в локальном хранилище и получить его на другой странице

0 голосов
/ 25 сентября 2018

У меня есть веб-страница с 3 разными страницами: page1, page2 и page3.На первой странице пользователь введет свое имя в текстовое поле.Я хочу сохранить это значение в локальном хранилище, чтобы снова использовать его на стр. 2 и стр. 3.

Я даже не могу получить его на стр. 1.Я делаю что-то неправильно?И я понятия не имею, как получить его на другой странице.Любая помощь? 

function myFunction() {
var name = document.getElementById("myInput").value;
document.getElementById("greeting").innerHTML = "Hello, " + name + "! Welcome!";
}

localStorage.setItem("userName", name);
document.getElementById("storedName").innerHTML = localStorage.getItem("userName");
<p>What is your name?</p>

<input id="myInput" type="text" placeholder="Name Surname">

<button onclick="myFunction()">Answer</button>

<p id="greeting"></p>
<p id="storedName"></p>

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

Выводы проблемы: 

localStorage.setItem("userName", name);
document.getElementById("storedName").innerHTML = localStorage.getItem("userName")

над двумя строками, выполненными перед подготовкой вашей DOM HTML, поэтому localStorage.setItem ("userName", name); // имя пусто

document.getElementById ("сохраненное имя") // innerHTML равно нулю

, поэтому возникло исключение Uncaught TypeError: Невозможно установить для свойства 'innerHTML' значение null

Вашу функцию java-скрипта следует изменить, как показано ниже 

    function myFunction() {
var name = document.getElementById("myInput").value;
document.getElementById("greeting").innerHTML = "Hello, " + name + "! Welcome!";
localStorage.setItem("userName", name);
document.getElementById("storedName").innerHTML = localStorage.getItem("userName");
}

и всякий раз, когда вам нужно отобразить localхранение данных на любых страницах, затем сначала проверьте доступность хранилища, а затем используйте

пример: 

if(localStorage.getItem("userName")!=undefined || localStorage.getItem("userName")!==null){
//To Do
}
0 голосов
/ 25 сентября 2018

Вам просто нужно внести несколько изменений: 

function getName() {
  return localStorage.getItem("userName");
}

function updateHTML() {
  var name = getName();
  document.getElementById("greeting").innerHTML = "Hello, " + name + "! Welcome!";
  document.getElementById("storedName").innerHTML = name;
}

function myFunction() {
  // Gets input value
  var name = document.getElementById("myInput").value;

  // Saves data to retrieve later
  localStorage.setItem("userName", name);
  
  // Updates HTML
  updateHTML();
}

Обратите внимание, что ваш код в порядке;единственная проблема заключалась в том, что 2 строки были вне функции, вот и все.Затем на другой странице вы можете использовать функцию updateHTML: 

updateHTML();

РЕДАКТИРОВАТЬ: я сделал дополнительную функцию, чтобы вы могли повторно использовать код, когда вам нужно только получить данные.Кроме того, всегда полезно разделять код, чтобы его было легче понять и поддерживать.Надеюсь, это помогло;дайте мне знать, если нет.

...