var formHandle = document.forms.infoForm;
formHandle.onsubmit = processForm;
function processForm() {
var formName = formHandle.f_name;
var formColor = formHandle.f_color;
localStorage.setItem('name', formName.value);
localStorage.setItem('color', formColor.value);
document.getElementById('newMsgBox').innerHTML = 'Welcome ' + localStorage.getItem('name') + ' !';
document.body.style.backgroundColor = localStorage.getItem('color');
return false;
}<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Storing Data</title>
<style>body{background:#c0c0c0;}</style>
</head>
<body>
<h1>Customizable Interface</h1>
<!-- WELCOME BOX -->
<div id="output">
<h2 id="newMsgBox">Welcome!</h2>
<nav>
<ul>
<li><a href="lab9.html">HOME</a></li>
<li><a href="products.html">PRODUCTS</a></li>
</ul>
</nav>
</div>
<!--USER PREFERENCES FORM-->
<form name="infoForm" action="#" method="get">
<fieldset>
<legend>Customize Your Experience</legend>
<!--GET USER NAME-->
<p>
<label for="inName" >What is your name?</label>
<input type="text" id="inName" name="f_name"/>
</p>
<!-- GET COLOUR-->
<p>
<label for="inColor" >What is your favourite colour? </label>
<input type="color" id="inColor" name="f_color" />
</p>
<p>
<input type="submit" value="Click to save" />
</p>
</fieldset>
</form>
<!--DELETE COOKIES-->
<p><input type="button" id="btnDel" value="Delete your Stored Information" /></p>
<script src="lab9.js"></script>
</body>
</html>一旦我点击"；点击保存"；按钮并且欢迎消息应该从"；欢迎"至"；欢迎输入姓名&"；。单击"删除"时，应删除本地存储值删除本地存储后，页面看起来应该和之前完全一样
所有表单元素都有一个内置的reset((方法。请参阅官方文档，了解这些元素是如何工作的，以便正确使用它们。
您的代码段需要的是-
formHandle.reset();
我已经修复了你的片段请同时阅读摘录中的评论
var formHandle = document.forms.infoForm;
var deleteBtn = document.getElementById('btnDel');
function processForm(event) {
// use the "event" to prevent submitting the form "i.e. calling the URL '#'"
// if your requirement is to only use those form values and update the UI
// store them in localstorage and have no backend/server interaction, then
// you don't want to submit the form at all.
event.preventDefault();
var formName = formHandle.f_name;
var formColor = formHandle.f_color;
// local storage calls would fail on StackOverflow - so commenting them out
// and adding alternate commands to demonstrate the required changes.
//localStorage.setItem('name', formName.value);
//localStorage.setItem('color', formColor.value);
//document.getElementById('newMsgBox').innerHTML = 'Welcome ' + localStorage.getItem('name') + ' !';
//document.body.style.backgroundColor = localStorage.getItem('color');
document.getElementById('newMsgBox').innerHTML = 'Welcome ' + formName.value + ' !';
document.body.style.backgroundColor = formColor.value;
formHandle.reset(); // this is what will reset the form!
}
function clearAll(event) {
// remove from localStorage
//localStorage.removeItem('name');
//localStorage.removeItem('color');
// resetting to original state
document.getElementById('newMsgBox').innerHTML = 'Welcome!';
document.body.style.backgroundColor = '#c0c0c0';
}
formHandle.onsubmit = processForm;
deleteBtn.onclick = clearAll;<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Storing Data</title>
<style>
body {
background: #c0c0c0;
}
</style>
</head>
<body>
<h1>Customizable Interface</h1>
<!-- WELCOME BOX -->
<div id="output">
<h2 id="newMsgBox">Welcome!</h2>
<nav>
<ul>
<li><a href="lab9.html">HOME</a></li>
<li><a href="products.html">PRODUCTS</a></li>
</ul>
</nav>
</div>
<!--USER PREFERENCES FORM-->
<form name="infoForm" action="#" method="get">
<fieldset>
<legend>Customize Your Experience</legend>
<!--GET USER NAME-->
<p>
<label for="inName">What is your name?</label>
<input type="text" id="inName" name="f_name" />
</p>
<!-- GET COLOUR-->
<p>
<label for="inColor">What is your favourite colour? </label>
<input type="color" id="inColor" name="f_color" />
</p>
<p>
<input type="submit" value="Click to save" />
</p>
</fieldset>
</form>
<!--DELETE COOKIES-->
<p><input type="button" id="btnDel" value="Delete your Stored Information" /></p>
<script src="lab9.js"></script>
</body>
</html>不要在processForm((函数中使用return false。默认情况下，提交时的表单将刷新页面，所有字段都将被清除。
提交表单后，默认情况下应该刷新页面。但是，您也可以尝试手动重新加载。
var formHandle = document.forms.infoForm;
formHandle.onsubmit = processForm;
function processForm() {
var formName = formHandle.f_name;
var formColor = formHandle.f_color;
if (!formName.value || !formColor.value) {
return false;
}
else {
localStorage.setItem('name', formName.value);
localStorage.setItem('color', formColor.value);
document.getElementById('newMsgBox').innerHTML = 'Welcome ' + localStorage.getItem('name') + ' !';
document.body.style.backgroundColor = localStorage.getItem('color');
// refresh the page
location.reload();
}
return false;
}