我试图创建一个表单，以便当用户填写表单时，所有内容都会存储到浏览器存储中。
但是，我目前想知道如何从页面上的控件获取值并使用与 response.html 文件相同的键名称将它们存储在 session 存储中。
我当前获得的输出在每个元素上都是未定义的。
"use strict";
var $ = function(id) { return document.getElementById(id); };
var saveReservation = function() {
// submit form
$("reservation_form").submit();
};
window.onload = function() {
$("submit_request").onclick = saveReservation;
$("arrival_date").focus();
};body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 600px;
border: 3px solid blue;
padding: 10px 20px;
}
fieldset {
margin-top: 1em;
margin-bottom: 1em;
padding: .5em;
}
legend {
color: blue;
font-weight: bold;
font-size: 85%;
margin-bottom: .5em;
}
label {
float: left;
width: 90px;
}
input, select {
margin-left: 1em;
margin-right: 1em;
margin-bottom: .5em;
}
input {
width: 14em;
}
input[type="radio"], input[type="checkbox"] {
width: 1em;
padding-left: 0;
margin-right: 0.5em;
}<!DOCTYPE html>
<html>
<head>
<title>Reservation request</title>
<link rel="stylesheet" href="reservation.css">
<script src="reservation.js"></script>
</head>
<body>
<main>
<h1>Reservation Request</h1>
<form action="response.html" method="get"
name="reservation_form" id="reservation_form">
<fieldset>
<legend>General Information</legend>
<label for="arrival_date">Arrival date:</label>
<input type="text" name="arrival_date" id="arrival_date"><br>
<label for="nights">Nights:</label>
<input type="text" name="nights" id="nights"><br>
<label>Adults:</label>
<select name="adults" id="adults">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<label>Children:</label>
<select name="children" id="children">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label>Room type:</label>
<input type="radio" name="room" id="standard" value="standard" checked>Standard
<input type="radio" name="room" id="business" value="business">Business
<input type="radio" name="room" id="suite" value="suite">Suite<br>
<label>Bed type:</label>
<input type="radio" name="bed" id="king" value="king" checked>King
<input type="radio" name="bed" id="double" value="double">Double Double<br>
<input type="checkbox" name="smoking" id="smoking" value="smoking">Smoking<br>
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<label for="name">Name:</label>
<input type="text" name="name" id="name"><br>
<label for="email">Email:</label>
<input type="text" name="email" id="email"><br>
<label for="phone">Phone:</label>
<input type="text" name="phone" id="phone"><br>
</fieldset>
<input type="button" id="submit_request" value="Submit Reservation"><br>
</form>
</main>
</body>
</html><!DOCTYPE html>
<!--response-->
<html>
<head>
<title>Reservation Request</title>
<link rel="stylesheet" href="reservation.css">
</head>
<body>
<main>
<script>
document.write("<h3>The following reservation has been submitted</h3>");
document.write("Name: ", sessionStorage.name, "<br>");
document.write("Phone: ", sessionStorage.phone, "<br>");
document.write("Email: ", sessionStorage.email, "<br>");
document.write("Arrival Date: ", sessionStorage.arrivalDate, "<br>");
document.write("Nights: ", sessionStorage.nights, "<br>");
document.write("Adults: ", sessionStorage.adults, "<br>");
document.write("Children: ", sessionStorage.children, "<br>");
document.write("Room Type: ", sessionStorage.roomType, "<br>");
document.write("Bed Type: ", sessionStorage.bedType, "<br>");
document.write("Smoking: ", sessionStorage.smoking, "<br><br>");
</script>
</main>
</body>
</html>最佳答案
语法似乎错误。试试这些吧
保存数据/初始化 session 存储:
// Save data to sessionStorage
sessionStorage.setItem('key', 'value');
从 sessionStorage 中获取保存的值
// Get saved data from sessionStorage
sessionStorage.getItem('key');
关于javascript - 使用 javascript 的浏览器存储，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42380707/