Прочтите данные формы Webstorage с помощью Javascript

-2

Чтобы узнать больше о веб-ресурсах HTML5 и Javascript, я пытаюсь создать простую страницу с формой, которая имеет только поле «имя» и «фамилия» и отправить кнопку. Я хочу, чтобы я сказал, что я вхожу в «Джон» и «Смит» и нажимаю «Ввод», затем перенаправляет пользователя на страницу результатов с двумя полями только для чтения с «Джоном», отображаемым в поле имени и «Смит» отображается в поле имени. Я не уверен, как вытащить сохраненную информацию в поля только для чтения. Любая помощь с этим будет принята с благодарностью!Прочтите данные формы Webstorage с помощью Javascript

код ниже:

webstorage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Web Storage</title> 
</head> 
<body> 

<form id="nameform" action="result.html"> 
First name:<br> 
<input type="text" id= "firstname" name="firstname"> 
<br> 
Last name:<br> 
<input type="text" id="lastname" name="lastname"> 
<br><br> 
<input onclick="store()" formmethod="post" type="submit" value="Submit"> 
</form> 

<script type="text/javascript"> 

function store() { 
    var inputFirstName = document.getElementById("firstname"); 
    var inputLastName = document.getElementById("lastname"); 
    localStorage.setItem("firstname", inputFirstName.value); 
    localStorage.setItem("lastname", inputLastName.value); 
} 

</body> 
</html>

result.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Result</title> 
</head> 
<body> 

<form> 
First name:<br> 
<input type="text" name="firstname" readonly> 
<br> 
Last name:<br> 
<input type="text" name="lastname" readonly> 


</body> 
</html>

источник

2015-04-08 Ben

вы пытались с помощью '.getItem'? –

Как я могу использовать .getItem на странице result.html? – Ben

'localStorage.getItem (...)'. –

Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Web Storage</title> 
</head> 
<body> 

<form id="nameform" action ="result.html"> 
First name:<br> 
<input type="text" id= "firstname" name="firstname"> 
<br> 
Last name:<br> 
<input type="text" id="lastname" name="lastname"> 
<br><br> 

<input onclick="store()" formmethod="post" type="submit" value="Submit"> 
</form> 

<script type="text/javascript"> 

function store() { 

    var inputFirstName = document.getElementById("firstname"); 
    var inputLastName = document.getElementById("lastname"); 
    localStorage.setItem("firstname", JSON.stringify(inputFirstName.value)); 
    localStorage.setItem("lastname", JSON.stringify(inputLastName.value)); 
} 
</script> 
</body> 
</html>

result.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Result</title> 
</head> 
<body> 

<form> 
First name:<br> 
<input type="text" name="firstname" id="firstname" readonly> 
<br> 
Last name:<br> 
<input type="text" name="lastname" id= "lastname" readonly> 


</body> 
<script type="text/javascript"> 

var retrivedFirstName = localStorage.getItem('firstname'); 
var retrivedLastName = localStorage.getItem('lastname'); 

document.getElementById('firstname').value = JSON.parse(retrivedFirstName); 

document.getElementById('lastname').value = JSON.parse(retrivedLastName); 

</script> 
</html>

источник

2015-04-08 15:45:52

вы хотите '.value' - это входы html. –

Я попытался добавить этот скрипт на мою страницу result.html, но когда я нажимаю кнопку submit на странице webstorage.html, на следующей странице все еще есть пустые поля. – Ben

Также проверьте, хранит ли оно ваше местное хранилище? –

Прочтите данные формы Webstorage с помощью Javascript

ответ

Смежные вопросы