Javascript 如何使用本地存储在新的html页面中显示文本？_Javascript_Html

Javascript 如何使用本地存储在新的html页面中显示文本？

javascript html

Javascript 如何使用本地存储在新的html页面中显示文本？,javascript,html,Javascript,Html,我对使用html很陌生，这是我想制作的第一个网站，供练习。我想在主页上做一个简短的调查，点击提交后，我想在下一页以句子的形式显示这些信息这是我的主页 <!DOCTYPE html> <html> <body> <h1><center>Short Survey</center></h1><big> <form action="afterSubmission.html"> <capti

我对使用html很陌生，这是我想制作的第一个网站，供练习。我想在主页上做一个简短的调查，点击提交后，我想在下一页以句子的形式显示这些信息

这是我的主页

<!DOCTYPE html>
<html>
<body>
<h1><center>Short Survey</center></h1><big>
<form action="afterSubmission.html">
<caption>1. What is your favourite browser?</caption>
<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>
<br>
<br>
<caption>2. What is your favourite food group?</caption>
<input list="food_groups" name="food">
<datalist id="food_groups">
    <option value="Meats/Alternatives">
    <option value="Vegetables">
    <option value="Dairy Products">
    <option value="Fruits">
    <option value="Grains">
    <option value="Confections (Junk Food)">
</datalist>
<br>
<br>
<caption>3. What is your favourite game genre?</caption><br>
    <input type="radio" name="game" value="FPS">First Person Shooter (Ex: Halo, Call of Duty)<br>
    <input type="radio" name="game" value="TPS">Third Person Shooter (Ex: Ghost Recon, Gear of War)<br>
    <input type="radio" name="game" value="Puzzle">Puzzle (Ex: Sudoku, Minesweeper)<br>
    <input type="radio" name="game" value="Sim">Simulation (Ex: Minecraft, SimCity)<br>
    <input type="radio" name="game" value="Other">Other (Please specify the genre)&nbsp;<input type="text" name="other_genre"><br>
<br>
<br>
<input type="Submit" onclick="saveData()">
</form>
<script>
function saveData(e){
e.preventDefault();
var q1 = browser;
var q2 = food;
var q3 = game;
localStorage.setItem("browser", q1.value);
localStorage.setItem("food", q2.value);
localStorage.setItem("game", q3.value);
}
</script>
</body>
</html>


短期调查
1.你最喜欢的浏览器是什么？




2.你最喜欢的食物是什么？




3.你最喜欢的游戏类型是什么？

第一人称射击手（例如：光环，任务召唤）

第三人称射击手（例如：幽灵侦察，战争装备）

益智游戏（例如：数独游戏、扫雷游戏）

模拟（例如：Minecraft，SimCity）

其他（请指定流派）





函数saveData（e）{
e、 预防默认值（）；
var q1=浏览器；
var q2=食品；
var q3=游戏；
localStorage.setItem（“浏览器”，q1.value）；
localStorage.setItem（“食品”，q2.价值）；
localStorage.setItem（“游戏”，q3.value）；
}

这是我的第二页，应该显示以下信息：

<html>
<h1>
<p>Your favourite browser is:&nbsp;</p><p id="val1"></p>
<p>Your favourite browser is:&nbsp;</p><p id="val2"></p>
<p>Your favourite browser is:&nbsp;</p><p id="val3"></p>
<script>
function setData1(){
document.getElementById("val1").innerHTML = localStorage.getItem(browser);
}
function setData2(){
document.getElementById("val2").innerHTML = localStorage.getItem(food);}
function setData3(){
document.getElementById("val3").innerHTML = localStorage.getItem(game);
}
</script>
</h1>
</html>


您最喜欢的浏览器是：

您最喜欢的浏览器是：

您最喜欢的浏览器是：

函数setData1（）{
document.getElementById（“val1”）.innerHTML=localStorage.getItem（浏览器）；
}
函数setData2（）{
document.getElementById（“val2”）.innerHTML=localStorage.getItem（food）；}
函数setData3（）{
document.getElementById（“val3”）.innerHTML=localStorage.getItem（游戏）；
}

主页运行良好（或者我认为是这样），但每当我点击submit时，它会将我带到第二个页面，而不需要用户输入（在段落之后它只是空白）。我如何才能让它工作？

在saveData函数中，您应该防止默认设置（即表单提交）。这将停止自动表单提交，您可以手动重定向到第二页

function saveData(e) {
    e.preventDefault();
    ... // store data
    window.location = "mySecondPage.html";
}

主页

 <h1><center>Short Survey</center></h1><big>
    <form action="afterSubmission.html" method="get">
    <caption>1. What is your favourite browser?</caption>
    <input id="browserValue" list="browsers">
    <datalist id="browsers" >
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
    </datalist>
    <br>
    <br>
    <caption>2. What is your favourite food group?</caption>
    <input id="foodValue" list="food">
    <datalist id="food">
        <option value="Meats/Alternatives">
        <option value="Vegetables">
        <option value="Dairy Products">
        <option value="Fruits">
        <option value="Grains">
        <option value="Confections (Junk Food)">
    </datalist>
    <br>
    <br>
    <caption>3. What is your favourite game genre?</caption>
    <input id="gameValue" list="game">
    <datalist id="game">
        <option value="FPS">First Person Shooter (Ex: Halo, Call of Duty)
        <option value="TPS">Third Person Shooter (Ex: Ghost Recon, Gear of War)
        <option value="Puzzle">Puzzle (Ex: Sudoku, Minesweeper)
        <option value="Sim">Simulation (Ex: Minecraft, SimCity)
        <option value="Other">Other (Please specify the genre)&nbsp;<input type="text" name="other_genre">
       </datalist>
    <br>
    <br>
    <input type="button" onclick="saveData()" value="Submit">
    </form>
    <script>
    function saveData(){
    var q1 = document.getElementById("browserValue");
    var q2 = document.getElementById("foodValue");
    var q3 = document.getElementById("gameValue");
    localStorage.setItem("browsers", q1.value);
    localStorage.setItem("food", q2.value);
    localStorage.setItem("game", q3.value);
    window.location = "page2.html";
    }
    </script>

短期调查
1.你最喜欢的浏览器是什么？




2.你最喜欢的食物是什么？




3.你最喜欢的游戏类型是什么？
第一人称射击手（例如：光环，任务召唤）
第三人称射手（例如：幽灵侦察，战争装备）
益智游戏（例如：数独游戏、扫雷游戏）
模拟（例如：Minecraft，SimCity）
其他（请指定类型）




函数saveData（）{
var q1=document.getElementById（“browserValue”）；
var q2=document.getElementById（“foodValue”）；
var q3=document.getElementById（“gameValue”）；
setItem（“浏览器”，q1.value）；
localStorage.setItem（“食品”，q2.价值）；
localStorage.setItem（“游戏”，q3.value）；
window.location=“page2.html”；
}

页面2.html

<h1>
<p id="answer1">Your favourite browser is:&nbsp;</p>
<p id="answer2">Your favourite browser is:&nbsp;</p>
<p id="answer3">Your favourite browser is:&nbsp;</p>
</h1>
<script>
document.getElementById("answer1").innerHTML += localStorage.getItem("browsers");
document.getElementById("answer2").innerHTML += localStorage.getItem("food");
document.getElementById("answer3").innerHTML += localStorage.getItem("game");
</script>


您最喜欢的浏览器是：
您最喜欢的浏览器是：
您最喜欢的浏览器是：
document.getElementById（“answer1”）.innerHTML+=localStorage.getItem（“浏览器”）；
document.getElementById（“answer2”）.innerHTML+=localStorage.getItem（“food”）；
document.getElementById（“answer3”）.innerHTML+=localStorage.getItem（“游戏”）；

document.getElementById（“浏览器”）什么都不是。。。在输入上使用名称或创建新id